anime-play-state によるアニメーションの一時停止、停止、非表示

アニメーションを扱うときは、誰でもアクセスできるようにすることが重要です。 WCAG SC 2.2.2: 一時停止、停止、非表示によると、ユーザーは 5 秒を超えるアニメーションを一時停止、停止、または非表示にできる必要があります。 CSS と JavaScript を使用して、ユーザーが制御できるアニメーションを作成する方法を詳しく見てみましょう。

シンプルなアニメーション

CSS キーフレームを使用して簡単なアニメーションを作成することから始めます。このアニメーションは、ボックスを画面上で水平に移動します。

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

プレイステートの追加

次に、animation-play-state プロパティを紹介します。このプロパティを使用すると、アニメーションを実行するか一時停止するかを制御できます。 CSS 変数 --play-state を使用して、アニメーションのデフォルトの状態を設定します。

:root {
  --play-state: running;
}

.animated-box {
  animation-play-state: var(--play-state);
}

ここでは、ルート レベルで --play-state 変数を定義し、その初期値を running に設定します。アニメーションは最初に実行されますが、この変数により後で制御することができます。

JavaScriptによるコントロールの追加

ユーザーが --play-state 変数を更新することでアニメーションを一時停止/再生できるボタンを追加します

<button id="toggle-btn">Pause Animation</button>

<script>
  const toggleButton = document.getElementById('toggle-btn');
  const root = document.documentElement;

  toggleButton.addEventListener('click', () => {
    const currentPlayState = getComputedStyle(root).getPropertyValue('--play-state').trim();

    if (currentPlayState === 'running') {
      root.style.setProperty('--play-state', 'paused');
      toggleButton.textContent = 'Resume Animation';
    } else {
      root.style.setProperty('--play-state', 'running');
      toggleButton.textContent = 'Pause Animation';
    }
  });
</script>

getComputedStyle を使用して --play-state 変数の現在の値を取得します。アニメーションが実行中か一時停止中かに応じて、値を切り替え、それに応じてボタンのテキストも更新します。

完全な動作例は codepen にあります

アニメーションの再生状態などのシンプルなソリューションを実装し、アニメーションのコントロールを提供することで、より包括的なデジタル エクスペリエンスの作成に役立ちます。

以上がanime-play-state によるアニメーションの一時停止、停止、非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。