CSS 속성이 있는 조건부 애니메이션

애니메이션, 전환 및 부드러운 스크롤을 사용하는 것은 재미있지만 접근성 문제를 나타내기도 합니다. 상황이 항상 움직이고 변할 때 다양한 그룹의 사람들이 귀하의 제품을 사용하는 데 어려움을 겪습니다.

이것이 운영 체제에 "움직임 감소"설정이 있는 이유입니다. 우리의 CSS 애니메이션은 이러한 설정을 존중하고 사용자가 애니메이션을 보고 싶을 때만 적용해야 합니다. 이를 달성하는 가장 좋은 방법은 prefers-reduced-motion 미디어 쿼리로 래핑하는 것입니다. 다양한 방법으로 사용할 수 있지만as described in this excellent article 모두 설정을 반복해야 하는 문제가 있습니다.
더 간단한 방법이 있습니다. 사용자 지정 속성을 사용할 수 있습니다.

@media (prefers-reduced-motion: reduce) {
  :root {
    --nomotion: none;
  }
}
html {
  scroll-behavior: var(--nomotion, smooth);
}
button {
  animation: var(--nomotion, rotate 1s infinite alternate);
}

이는 사용자가 애니메이션을 보고 싶지 않을 때 CSS 사용자 정의 속성nomotion을 none로 정의합니다. 사용자가 애니메이션을 보고 싶어하는 경우 정의되지 않았으므로 CSS 엔진이 애니메이션 설정인 폴백을 적용합니다.

실제로 작동하는 것을 볼 수 있습니다in this CodePen.



브라우저 개발자 도구에서 reduced motion emulation을 사용하여 테스트할 수 있습니다.

다음은 이를 실제로 보여주는 스크린캐스트입니다.