CSS3 ホバー アニメーションを完全に完了させるにはどうすればよいですか?

ホバー上の CSS3 アニメーション: 完全な完了を保証する

CSS3 では、ホバー アニメーションは、ユーザー エクスペリエンスを向上させる視覚的に魅力的な方法を提供します。ただし、要素からカーソルを外すとアニメーションが突然停止する場合に、一般的な問題が発生します。この問題は、特にアニメーションをフルコースで実行したい場合にイライラする可能性があります。

中断のあるキーフレーム アニメーション

提供されたコード スニペットは、トリガーされた単純なバウンス アニメーションを示しています。 :hover 状態を使用します。ただし、質問で述べたように、マウス カーソルが要素から出るとアニメーションが途中で停止します。これは、ホバー アニメーションがイベント ベースであり、指定されたイベント (この場合はマウスオーバー) がアクティブな間のみ実行されるためです。

フル アニメーションを強制できませんか?

残念ながら、CSS 単独では、CSS3 アニメーションをトリガー イベントを超えて強制的に継続させることはできません。この仕様では、このシナリオに対する直接的な解決策は提供されていません。

JavaScript によるエクスペリエンスの強化

この制限に対処するために、JavaScript を組み込んで、ホバーアニメーション。アニメーションをクラスとして追加し、アニメーションが完了したら削除することで、マウスの位置に関係なくアニメーションを完全に実行できます。

JavaScript コードの実装

次の JavaScript コードで問題を解決します:

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

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

このスクリプトでは、アニメーションはクラスとして適用されます。 (「アニメーション化」) し、アニメーションが終了に達すると削除され、マウスが要素から離れた後でも完全な反復が完了できるようになります。

結論

これは真実ですが、純粋な CSS では、イベントをトリガーした後にアニメーションを強制的に完了させることができません。JavaScript の統合により、この問題に対処するための柔軟で効果的なソリューションが提供されます。 CSS アニメーションと JavaScript のイベント処理機能を組み合わせることで、特定の要件を満たす応答性の高い魅力的なアニメーションを作成できます。

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