CSSを使用したホバー時のアニメーション停止方法

1. CSSのanimation-play-stateプロパティを使用する方法:

   .animated-element {
    animation: my-animation 1s infinite;
   }
   .animated-element:hover {
    animation-play-state: paused;
   }

   上記の例では、.animated-elementクラスがアニメーションを持っている要素を表しています。最初のルールでは、my-animationという名前のアニメーションが1秒ごとに無限に繰り返されるように設定されています。ホバー時にはanimation-play-stateプロパティを使用してアニメーションを一時停止します。

2. JavaScriptを使用してアニメーションを制御する方法:

   <div class="animated-element" onmouseover="pauseAnimation()" onmouseout="resumeAnimation()"></div>
   <script>
   function pauseAnimation() {
    document.querySelector('.animated-element').style.animationPlayState = 'paused';
   }
   function resumeAnimation() {
    document.querySelector('.animated-element').style.animationPlayState = 'running';
   }
   </script>

   上記の例では、.animated-elementクラスを持つ要素にマウスオーバーおよびマウスアウトのイベントリスナーを追加しています。マウスオーバー時にはpauseAnimation()関数が呼び出され、アニメーションを一時停止します。マウスアウト時にはresumeAnimation()関数が呼び出され、アニメーションを再開します。

これらはいくつかの一般的な方法ですが、実際にはさまざまな方法でアニメーションを制御することができます。具体的な要件や使用しているフレームワークによって最適な方法が異なる場合もあります。必要に応じてこれらの例をカスタマイズして使用してください。