減らされた動きをシミュレートする

  • [アーティクル]

CSS アニメーションはアクセシビリティの問題になる可能性があります。 オペレーティング システムでは、ユーザーの混乱や発作のトリガーなどの潜在的な健康関連の問題を回避するためにアニメーションをオフにするオプションを含めることで、この問題に対処します。

Web ページでは、 prefers-reduced-motion CSS メディア クエリを使用して、アニメーションに対するユーザーの好みを検出できます。 次に、アニメーション コードをテストでラップして、条件付きでアニメーションを実行します。 次に例を示します。

header {
  /* The header element is animated */
  animation: slidein 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  /* The user prefers reduced motion */
  .header {
    /* Turn off the animation for the header element */
    animation: none;
  }
}

オペレーティング システムの設定を変更することなく、コードが期待どおりに動作することをテストするには、DevTools でオペレーティング システムの縮小されたモーション設定をシミュレートします。

  1. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  2. DevTools で Ctrl + Shift + P (Windows/Linux) または Command + Shift + P (macOS) を押して コマンド メニューを開きます。

  3. 入力を減らし始め、[CSS のエミュレート優先- reduced-motion] オプションを選択し、Enter キーを押します。

    [コマンド] メニューの [CSS prefers-reduced-motion] オプションをエミュレートする

  4. Web ページを更新し、アニメーションを実行するかどうかをチェックします。

関連項目