Rotate on hover and stop after animation using only CSS3?

Question

I've come across this post// Slide out text from an image using CSS on hover

The CSS works perfectly, except I would like for the animation to stop after it's rotated once.

Is this possible? If so how can I accomplish this?

HTML:

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(180deg);
    }
    to { 
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes rotate {
    from {
      -moz-transform: rotate(180deg);
    }
    to { 
        -moz-transform: rotate(0deg);
    }
}

.srch_btn:hover {   
    -webkit-animation-name:            rotate; 
    -webkit-animation-duration:        0.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name:            rotate; 
    -moz-animation-duration:        0.5s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

Answer 1

Change animation-iteration-count: infinite to 2.