Motion

모션은 상태 변화를 연결하고, 정보가 나타나거나 사라지는 흐름을 설명합니다. 필요한 순간에만 짧게 움직이고, 모션을 줄여도 같은 정보와 기능을 전달합니다.

컴포넌트 동작

꺼짐

움직임에 민감한 사용자를 위한 접근성 설정입니다. 전환 효과를 줄여도 상태 변화와 조작 기능은 그대로 유지됩니다.

꺼짐

부드러운 전환 (100ms)

꺼짐

즉시 전환

OS 모션 줄이기꺼짐

motion.css를 불러오면 OS의 모션 줄이기 설정에 따라 페이지 전체의 애니메이션과 전환을 최소화합니다. 위 비교 예시에도 OS 설정이 우선 적용됩니다.

import '@mbsw/tokens/styles.css';
import '@mbsw/tokens/motion.css';
import '@mbsw/ui/styles.css';

JavaScript 애니메이션은 별도로 prefers-reduced-motion에 대응해주세요.