css - ホバーで回転し、CSS3のみを使用してアニメーションの後に停止しますか？

Question

私はこの投稿に出くわしました// ホバーでCSSを使用して画像からテキストをスライドアウトします

CSSは完全に機能しますが、アニメーションを1回回転させた後に停止させたい場合を除きます。

これは可能ですか？もしそうなら、どうすればこれを達成できますか？

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ます。