マーキーホバーストップ:CSSを使用したテキストのアニメーション制御方法

1. CSSアニメーションを使用する方法:

   <style>
   .marquee {
    animation: marquee 10s linear infinite;
   }
   .marquee:hover {
    animation-play-state: paused;
   }
   @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
   }
   </style>
   <div class="marquee">ここにスクロールさせたいテキストを入力</div>

2. JavaScriptを使用する方法:

   <style>
   .marquee {
    animation: marquee 10s linear infinite;
   }
   </style>
   <div class="marquee" onmouseover="stopMarquee(this)" onmouseout="startMarquee(this)">ここにスクロールさせたいテキストを入力</div>
   <script>
   function stopMarquee(element) {
    element.style.animationPlayState = 'paused';
   }
   function startMarquee(element) {
    element.style.animationPlayState = 'running';
   }
   </script>

これらの方法を使用すると、マウスホバー時にマーキーテキストのスクロールを停止させることができます。必要に応じて、CSSやJavaScriptのコードをカスタマイズしてアニメーションの速度や方向を調整することもできます。