動きは常に還元運動を好むことはありません

多くの開発者はprefers-reduced-motionメディアクエリに対処する際に、一般的なCSSスニペットを利用しています。このスニペットは、ユーザーがオペレーティングシステムのモーション設定の削減を有効にしている場合、Webサイト上のすべてのモーションを排除することを目的としています。ただし、このアプローチは必ずしも理想的ではありません。

 @media（reduced-motion：reduce）{
  * {
    アニメーション期間：0.01ms！重要。
    Animation-Iteration-Count：1！重要;
    遷移期間：0.01ms！重要。
    スクロールビハビオール：auto！falight;
  }
}

prefers-reduced-motionの重要性

prefers-reduced-motionの設定は、画面上の動きに関連するアクセシビリティの懸念に対処します。前庭障害、片頭痛、または発作トリガーの個人の場合、過度のアニメーションは衰弱させる可能性があります。エリック・ベイリーが指摘しているように、ウェブブラウジングは予期しないアニメーションの地雷原になる可能性があります。

抑制よりも微妙な

すべてのアニメーションを完全に削除する衝動は強力ですが、これはしばしば逆効果です。アニメーションは、たとえば、複雑な相互作用や要素間の関係を明確にすることにより、アクセシビリティを向上させることができます。アニメーションを完全に無効にすると、これらの有益な側面が削除されます。より微妙なアプローチが望ましい。アニメーションを完全に排除するのではなく、アニメーションを削減、減速、または変更します。

Ben Nadelは、複数の@keyframesを使用して完全なアニメーションと縮小モーションバージョンの両方を提供する優れた方法を実証しました。たとえば、モーダルは、デフォルトではフェードインとスケールインの両方を使用する場合がありますが、 prefers-reduced-motion場合のみフェードインしている場合のみ。

 / *デフォルト：モーションアニメーションの削減 */
@keyframes modal-enter {
  {Opacity：0; }
  {不透明：1; }
}

/ *非プレファレンスのオーバーライド：フルアニメーション */
@media（redurecured-motion：no-preference）{
  @keyframes modal-enter {
    {Opacity：0;変換：スケール（0.7）; }
    {不透明：1;変換：スケール（1.0）; }
  }
}

このアプローチは、すべての動きの包括的な禁止よりも、思慮深く縮小モーションソリューションを優先します。

CSSを超えて：JavaScriptアニメーション

最初のCSSスニペットは、CSS駆動型のアニメーションのみを効果的に管理します。 JavaScriptアニメーションは、Josh Comeauが観察したように、非常に速く、見当識障害のあるアニメーションなど、意図しない結果につながる可能性があります。したがって、包括的な戦略では、CSSとJavaScriptアニメーションの両方を考慮する必要があります。

以上が動きは常に還元運動を好むことはありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。