title: Rotate on hover and stop after animation using only CSS3?
body: <p>I've come across this post//
  <a href="https://stackoverflow.com/questions/12712295/slide-out-text-from-an-image-using-css-on-hover">Slide out text from an image using CSS on hover</a></p>
  
  <p>The CSS works perfectly, except I would like for the animation to stop after it's rotated once.</p>
  
  <p>Is this possible? If so how can I accomplish this?</p>
  
  <p>HTML:</p>
  
  <pre><code>@-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;
  }
  </code></pre>