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

ホバー時の CSS3 アニメーションの強制完了

CSS3 アニメーションを :hover 状態に適用すると、要素を終了するとアニメーションが突然停止します。この動作は、特に特定の回数の反復を実行する必要があるアニメーションの場合、望ましくない可能性があります。これに対処するには、次の戦略を検討してください:

JavaScript の使用:

最も直接的な解決策は、JavaScript を使用してアニメーションを強制的に完了することです。これは、イベント リスナーを介してアニメーション クラスを動的に追加および削除することで実現できます。

$(".element").hover(
  function() { $(this).addClass("animation-name"); },
  function() { $(this).removeClass("animation-name"); }
);

CSS キーフレームの利用:

現在、CSS のみのソリューションはありません。ホバー時にアニメーションの完了を直接強制します。テクニックの 1 つは、ホバー アニメーションを超えて拡張するダミー キーフレームを作成することです。

@keyframes bounce {
  ... (Original animation keyframes) ...
  99% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

キーフレームの継続時間をわずかに延長すると、ホバー状態が終了した後でもアニメーションは完了するまで続行されます。

潜在的な警告:

アニメーションの完了を強制すると、場合によっては視覚的なアーティファクトが発生する可能性があることに注意することが重要です。たとえば、アニメーションに回転要素が含まれている場合、マウスが要素から出るときに突然停止またはジャンプが発生する可能性があります。

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