prefers-reduced-motion

CSS の prefers-reduced-motion メディア特性は、ユーザーがアニメーションや動作を最少化するよう要求したことを検出するために使用します。

構文

no-preference: システムが把握している設定をユーザーが行っていないことを示します。
reduce: ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。

例

この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。

HTML

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

CSS

.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}

.animation {
  background-color: rebeccapurple;
  color: #fff;
  font: 1.2em Helvetica, arial, sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;  
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-2 13:47:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

結果

仕様書

仕様書	状態	備考
Media Queries Level 5 prefers-reduced-motion の定義	編集者草案	初回定義

ブラウザーの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`prefers-reduced-motion` media feature 実験的	Chrome 未対応なし	Edge 未対応なし	Firefox 完全対応 63	IE 未対応なし	Opera 未対応なし	Safari 完全対応 10.1	WebView Android 未対応なし	Chrome Android 未対応なし	Edge Mobile 未対応なし	Firefox Android 完全対応 64	Opera Android 未対応なし	Safari iOS 完全対応 10.3	Samsung Internet Android ?

凡例

完全対応: 完全対応
未対応: 未対応
実装状況不明: 実装状況不明
実験的。動作が変更される可能性があります。: 実験的。動作が変更される可能性があります。

prefers-reduced-motion

構文

例

HTML

CSS

結果

仕様書

ブラウザーの対応

凡例

関連情報

ドキュメントのタグと貢献者

prefers-reduced-motion

構文

例

HTML

CSS

結果

仕様書

ブラウザーの対応

凡例

関連情報

ドキュメントのタグと貢献者

最高のウェブ開発を学びましょう

ありがとうございます！ 購読確認用の新着メールを探してください。

ありがとうございます！購読確認用の新着メールを探してください。