어떤 움직임도 항상 감소 된 모션을 선호하지 않습니다

많은 개발자들이 prefers-reduced-motion 미디어 쿼리를 해결할 때 일반적인 CSS 스 니펫을 사용합니다. 이 스 니펫은 사용자가 운영 체제에서 모션 설정을 줄인 경우 웹 사이트의 모든 모션을 제거하는 것을 목표로합니다. 그러나이 접근법이 항상 이상적인 것은 아닙니다.

 @Media (Prefers-Seeduced-Motion : Reduce) {
  * {
    애니메이션 기간 : 0.01ms! 중요;
    애니메이션-고유 한 카운트 : 1! 중요;
    전환 기간 : 0.01ms! 중요;
    스크롤-행동 : 자동! 중요;
  }
}

prefers-reduced-motion 중요성

prefers-reduced-motion 설정은 화면 모션과 관련된 접근성 문제를 해결합니다. 전정 장애, 편두통 또는 발작 트리거가있는 개인의 경우 과도한 애니메이션이 쇠약해질 수 있습니다. Eric Bailey가 지적한 것처럼 웹 브라우징은 예기치 않은 애니메이션의 지뢰밭이 될 수 있습니다.

억제에 대한 미묘함

모든 애니메이션을 완전히 제거하려는 충동은 강력하지만 종종 비생산적입니다. 예를 들어, 복잡한 상호 작용이나 요소 간의 관계를 명확하게하여 애니메이션은 접근성을 향상시킬 수 있습니다. 완전히 비활성화하면 이러한 유익한 측면이 제거됩니다. 보다 미묘한 접근법이 바람직하다. 애니메이션을 완전히 제거하기보다는 애니메이션을 줄이거 나 느리게하거나 수정합니다.

Ben Nadel은 여러 @keyframes 사용하여 전체 애니메이션과 감소 된 모션 버전을 모두 제공하는 우수한 방법을 시연했습니다. 예를 들어, 모달은 기본적으로 페이드 인과 스케일 인을 모두 사용할 수 있지만, prefers-reduced-motion 경우에만 페이드 인이 활성화 될 수 있습니다.

 / * 기본값 : 모션 애니메이션 감소 */
@keyframes modal-enter {
  {불투명도 : 0; }
  {불투명도 : 1; }
}

/ * 예비 회의에 대한 재정의 : 전체 애니메이션 */
@Media (선호-감소 모션 : 예비 회의) {
  @keyframes modal-enter {
    {불투명도 : 0; 변환 : 스케일 (0.7); }
    {불투명도 : 1; 변환 : 스케일 (1.0); }
  }
}

이 접근법은 모든 운동에 대한 담요 금지에 대한 사려 깊고 감소 된 모션 솔루션을 우선시합니다.

CSS 너머 : JavaScript 애니메이션

초기 CSS 스 니펫은 CSS 중심 애니메이션 만 효과적으로 관리합니다. Josh Comeau가 관찰 한 것처럼 JavaScript 애니메이션은 예측할 수 없을 정도로 행동 할 수 있으며 매우 빠르고 혼란스러운 애니메이션과 같은 의도하지 않은 결과를 초래할 수 있습니다. 따라서 포괄적 인 전략은 CSS 및 JavaScript 애니메이션을 모두 고려해야합니다.

위 내용은 어떤 움직임도 항상 감소 된 모션을 선호하지 않습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!