prefers-reduced-motion에 따라 불필요한 애니메이션을 줄입니다.
일부 사용자는 큰 이동과 반복 애니메이션에서 어지럼증이나 집중 어려움을 겪습니다. 기본 UI가 애니메이션 없이도 이해되게 만든 뒤, prefers-reduced-motion:reduce에서 장식 이동과 자동 스크롤을 제거하거나 매우 짧게 줄입니다.
상자에 마우스를 올리면 .target:hover가 transform: translateX(60px)를 걸고, transition 0.5s가 그 이동을 반초 동안 이어 상자가 오른쪽으로 미끄러집니다. 동작 줄이기를 켠 환경에서는 미디어 쿼리가 transition과 hover 이동을 모두 none으로 바꿔 상자가 제자리에 머물므로, 이 예제에서는 hover 때 달라지는 것이 하나도 남지 않습니다. 움직임을 뺀 자리에는 배경색 변화처럼 움직이지 않는 단서를 두는 편이 좋습니다.
상태와 조작 가능성을 누구나 알아볼 수 있게 표현할 때 필요한 규칙입니다. 색상과 움직임은 사용자 설정, 키보드 포커스와 명도 대비를 함께 확인하세요.
모든 transition을 전역에서 강제로 0.001ms로 바꾸면 기능상 필요한 상태 변화나 이벤트 처리와 충돌할 수 있습니다.
직접 바꿔보세요운영체제의 동작 감소 설정을 켜고 hover 결과를 비교하세요.