css - 仅使用 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。