減らされた動きをシミュレートする
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 でオペレーティング システムの縮小されたモーション設定をシミュレートします。
DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
DevTools で Ctrl + Shift + P (Windows/Linux) または Command + Shift + P (macOS) を押して コマンド メニューを開きます。
入力を減らし始め、[CSS のエミュレート優先- reduced-motion] オプションを選択し、Enter キーを押します。
Web ページを更新し、アニメーションを実行するかどうかをチェックします。
関連項目
- UI アニメーションがオフになっているページが使用可能であることを確認する - デモ ページを使用したチュートリアル。