CSSアニメーションを一時停止する方法

アニメーションの一時停止と再開のためのクラスの切り替え: HTML要素に特定のクラスを追加または削除することで、アニメーションの一時停止と再開を制御することができます。以下は例です。
```
<style>
 .paused {
   animation-play-state: paused;
 }
</style>
<div id="animated-element" class="paused">アニメーション要素</div>
<script>
 var element = document.getElementById('animated-element');
 // 一時停止と再開の切り替え
 element.addEventListener('click', function() {
   element.classList.toggle('paused');
 });
</script>
```
上記の例では、クラス名「paused」がアニメーション要素の一時停止と再開を制御します。要素をクリックすると、一時停止と再開が切り替わります。

JavaScriptを使用したアニメーションの制御: JavaScriptを使用して、アニメーションを直接制御することもできます。以下は例です。

<style>
 @keyframes myAnimation {
   0% { opacity: 1; }
   100% { opacity: 0; }
 }
</style>
<div id="animated-element">アニメーション要素</div>
<script>
 var element = document.getElementById('animated-element');
 var animation = element.animate([
   { opacity: 1 },
   { opacity: 0 }
 ], {
   duration: 1000,
   iterations: Infinity
 });
 // アニメーションの一時停止と再開
 element.addEventListener('click', function() {
   if (animation.playState === 'running') {
     animation.pause();
   } else {
     animation.play();
   }
 });
</script>

上記の例では、JavaScriptを使用してアニメーションを制御しています。要素をクリックすると、アニメーションが一時停止または再開します。

これらは、CSSアニメーションを一時停止するためのシンプルで簡単な方法の一部です。必要に応じてこれらの例をカスタマイズして使用してください。