:hover 要素の終了時に CSS3 アニメーションが確実に完了するようにするにはどうすればよいですか?

:hover 要素終了時に CSS3 アニメーションの完了を強制する

:hover 状態の CSS3 アニメーションは、要素にインタラクティブ性を追加するエレガントな方法を提供します。ただし、制限の 1 つは、カーソルが要素から離れるとアニメーションが突然中止されることです。この問題を解決し、純粋に CSS を使用してアニメーションの実行を強制的に完了させる方法は次のとおりです。

提供されているアニメーションであるバウンスは、バウンス効果を作成する一連のキーフレームを定義します。マウスが要素から出た後でも強制的にアニメーションを継続させるために、賢いテクニックを採用しています。

1. クラス トリガーを追加します:
   別のクラスを作成します。アニメーション」と、対応するアニメーション (定義したのと同じバウンス キーフレーム)。
2. をトリガーします。ホバー付きアニメーション:
   要素の :hover 状態で、アニメーションを直接適用する代わりに、アニメーション クラスを追加します。このクラスには実際のアニメーションが含まれています。
3. アニメーション終了時のトリガーを削除します:
   JavaScript を使用してアニメーション終了イベントをリッスンします。アニメーションが完了したら、要素からアニメーション化されたクラスを削除します。これにより、アニメーションが実質的に停止されます。

これは変更された例です:

<style>
@keyframes bounce { /* Same as before */ }
.animated { animation: bounce 1s; }
</style>

<div class="box">
  Hover me!
</div>

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated");  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

このアプローチでは、カーソルが .box から離れた後でもアニメーションは再生を続けます。要素。ライブ デモンストレーションについては、この最新の Fiddle にアクセスしてください: http://jsfiddle.net/u7vXT/1.

以上が:hover 要素の終了時に CSS3 アニメーションが確実に完了するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。