CSS3 :hover アニメーションはマウスアウト後に強制的にサイクルを完了できますか?

CSS3 アニメーション:hover;アニメーション全体の強制

CSS3 では、一般的なアニメーション手法は :hover を使用して要素上でアニメーションをトリガーします。ただし、カーソルが要素から離れると、アニメーションは突然停止します。

質問

:hover 上の CSS3 アニメーションは、マウスが要素から離れた後でも完全なアニメーション サイクルを継続するように強制できます。 ?

回答

残念ながら、CSS3 だけではこれを実現できません。唯一の解決策は、CSS と JavaScript を組み合わせて使用​​することです。

JavaScript の解決策

JavaScript を使用して目的の結果を達成する方法は次のとおりです。

• 次のようにアニメーションを追加します。
• アニメーションが終了したら、アニメーション クラスを削除します。

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

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

このアプローチにより、要素上のカーソルの位置に関係なく、アニメーションが完全なサイクルを継続することが保証されます。

以上がCSS3 :hover アニメーションはマウスアウト後に強制的にサイクルを完了できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。