기초FOX · Motion

움직임

움직임은 지금 무슨 일이 일어났는지 알려 주는 용도로만 써요. 짧게 끝나고, 꾸미기 위해 계속 움직이지 않아요.

길이 세 가지

클릭해서 직접 비교해 보세요. 마지막 줄은 같은 320ms를 끊어서 움직이는 단계 이징으로 보여 줘요.

DURATION DEMO

fast 120ms

base 200ms

slow 320ms

slow + step

transition: transform var(--nm-dur-base) var(--nm-ease);

DURATIONS

--nm-dur-fast120ms마우스를 올리거나 누를 때, 체크 표시처럼 작은 반응

--nm-dur-base200ms토글, 탭 전환, 툴팁처럼 보통 반응

--nm-dur-slow320ms바텀시트, 팝업처럼 크게 나타나고 사라지는 것

움직임의 속도 곡선이에요. 두 가지만 있어요.

EASING

--nm-easecubic-bezier(0.2, 0.8, 0.2, 1). 빠르게 시작해서 부드럽게 멈춰요. 기본값이에요.

--nm-ease-stepsteps(4, end). 네 걸음으로 끊어서 움직여요. 옛 컴퓨터 같은 느낌이 필요한 곳(불러오는 표시, 창이 열릴 때)에만 써요.

기기가 움직임 줄이기(prefers-reduced-motion)를 켜 두었다면 모든 전환과 반복 움직임을 끄고 상태만 바로 바꿔요.

REDUCED MOTION

움직이지 않아도 뜻이 전해져야 해요. 색, 글자, 위치 변화로 상태를 함께 알려요.

@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}