CSS3 ホバー アニメーションがマウス終了時に途中で停止しないようにするにはどうすればよいですか?

マウス終了時の :hover によってトリガーされる CSS3 アニメーションの保持

要素の :hover 状態で CSS3 アニメーションを使用する場合、一般的に次のような問題が発生します。マウスカーソルが要素から離れたときにアニメーションが突然終了する問題。マウスの存在に関係なくアニメーションを自然な長さで完了させたい場合、この動作は望ましくない可能性があります。

解決策: JavaScript の組み込み

残念ながら、標準化された CSS ソリューションはありません。この要件のために。この制限を克服するには、次のように JavaScript を少し組み込むことができます:

1. アニメーション クラスを割り当てます: 必要なアニメーションを含む要素にアニメーション クラスを追加します。
2. アニメーション終了イベントの処理: アニメーション終了イベントにイベント リスナーをアタッチします。これはさまざまなツールでサポートされています。
3. アニメーション クラスの削除: イベント リスナー内で、要素からアニメーション クラスを削除し、アニメーションが実行を完了できるようにします。
4. アニメーションのトリガーon hover: ホバーハンドラーを変更して、ホバーされたときに要素にアニメーション クラスを追加します。

例:

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

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

このコードは、アニメーション終了イベントにイベント リスナーをアタッチし、要素から「animated」クラスを削除します。その完成。さらに、要素にカーソルを置くと、同じアニメーション クラスが追加されます。

以上がCSS3 ホバー アニメーションがマウス終了時に途中で停止しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。