旋转并在动画后仅使用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。