沒有運動總是不喜歡減少動作

許多開發人員在解決prefers-reduced-motion媒體查詢時使用常見的CSS片段。如果用戶在操作系統中啟用了減少運動設置，則該片段旨在消除網站上的所有動作。但是，這種方法並不總是理想的。

 @Media（預先減少的動作：降低）{
  * {
    動畫效果：0.01ms！重要；
    動畫 - 識別計數：1！重要；
    過渡效果：0.01ms！重要；
    捲軸行為：自動！重要；
  }
}

prefers-reduced-motion的重要性

prefers-reduced-motion設置解決了與屏幕運動有關的可及性問題。對於患有前庭疾病，偏頭痛或癲癇發作誘因的人，過多的動畫可能會使人衰弱。正如埃里克·貝利（Eric Bailey）所指出的那樣，網絡瀏覽可以成為意外動畫的雷區。

對抑制的微妙

雖然完全消除所有動畫的衝動很強烈，但這通常會適得其反。動畫可以通過澄清複雜的交互或元素之間的關係來增強可訪問性。完全禁用動畫可以消除這些有益的方面。更細微的方法是可取的。減少，放慢或修改動畫，而不是完全消除它們。

本·納德爾（Ben Nadel）展示了一種出色的方法，使用多個@keyframes提供完整的動畫和減少動作版本。例如，默認情況下，模態可能同時使用淡入淡入和擴展，但僅在prefers-reduced-motion活動時才淡入。

 / *默認：減少運動動畫 */
@KeyFrames模式 - 輸入{
  來自{不透明度：0; }
  到{不透明：1; }
}

/ *替代無偏見：完整動畫 */
@Media（偏愛降低：無偏愛）{
  @KeyFrames模式 - 輸入{
    來自{不透明度：0;變換：比例尺（0.7）; }
    到{不透明：1;變換：比例尺（1.0）; }
  }
}

這種方法優先考慮對所有動作的毯子禁令進行周到的，減少的動作解決方案。

超越CSS：JavaScript動畫

初始CSS片段僅有效地管理CSS驅動的動畫。正如喬什·科莫（Josh Comeau）所觀察到的那樣，JavaScript動畫可能會表現得不可預測，可能導致意想不到的後果，例如非常快速和迷失方向的動畫。因此，全面的策略必須同時考慮CSS和JavaScript動畫。

以上是沒有運動總是不喜歡減少動作的詳細內容。更多資訊請關注PHP中文網其他相關文章！