旋转悬停并仅在使用CSS3动画后停止？

Question

我已经遇到这个帖子// Slide out text from an image using CSS on hover

的CSS完美的作品，但我想为动画停止它的旋转一圈后。

这可能吗？如果是的话我怎么能做到这一点？

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

变化animation-iteration-count: infinite到2。