くまだどうも、くまだです。
CSSのprefers-reduced-motionについて。
prefers-reduced-motionとは
prefers-reduced-motionは、ユーザーのプリファレンス設定（環境設定）に応じて設定できるCSSのメディアクエリです。各OSごとに以下の設定できます。
- Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメーションを表示する
- macOS: システム環境設定 → アクセシビリティ → ディスプレイ → 視差効果を減らす
- iOS: 設定 → アクセシビリティ → 視覚効果を減らす
- Android: 設定 → ユーザー補助 → アニメーションの削除
コードは以下のように記述します。
@media (prefers-reduced-motion: no-preference) {
/* ユーザーがアニメーションを無効にする設定をしていない場合 */
}
@media (prefers-reduced-motion: reduce) {
/* アニメーション効果を削除・軽減の設定をした場合に有効化するスタイル */
}- no-preference：ユーザーがアニメーションを無効にする設定をしていない場合
- reduce : ユーザーがアニメーションを無効にする設定をしている場合
ユーザーがOS側でアニメーションの設定を無効にしているか、そうでないかの状況に応じてスタイルを設定することができます。
例えば特定のアニメーションを無効にしたい場合は、以下のように記述できます。
.box {
width: 100px;
height: 100px;
background-color: orange;
animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
/* アニメーション効果を削除・軽減の設定をしている場合 */
@media (prefers-reduced-motion: reduce) {
.box {
/* アニメーション無効 */
animation: none;
}
}ここまで読んでくださりありがとうございました。