css - CSS3 アニメーション + @keyframe 最後まで実行

Question

要素が :hover の場合、最後までアニメーションを再生する方法が見つかりません。

• ホバーアウトすると、アニメーションがリセットされますが、最後まで続けたいです。
• Jsフィドル

<div class="picture"></div>

    .picture:hover {
       -webkit-animation:swing 1s ease-in-out;
    }


    @-webkit-keyframes swing {
      [...] 
    }

Answer 1

おそらく完全な解決策ではありませんが、picture クラスに以下を追加してください。

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

JsFiddle: http://jsfiddle.net/5SueS/4/

このソリューションは、最新のブラウザーでは機能しなくなりました。:hover; の css3 アニメーションを参照してください。アニメーション全体を強制する

Answer 2

私はこれが好きでした http://jsfiddle.net/Z5aq7/

ホバリングの代わりに、それをクラス（.animate）にして、ホバー時にクラスを追加しました

$('.picture').hover(function(){
    $(this).addClass('animate');
});

お役に立てれば！