Same distance. A different feeling.

도착은 같아도,
움직임은 다르니까.

처음엔 천천히, 마지막엔 가볍게. 두 제어점으로 만드는 CSS easing을 곡선과 이동률로 살펴보세요.

시간과 이동률

X = TIME / Y = PROGRESS

시간 25%40.85%

시간 50%80.24%

시간 75%96.05%

버튼을 누를 때만 한 번 움직입니다.

CSS · 텍스트를 선택해 복사

가로축은 재생 시간, 세로축은 이동률입니다. 같은 시간 50%에서도 ease는 약 80%를 이동하고 linear는 50%를 이동합니다. 아래 수치는 시간에 대응하는 곡선의 이동률입니다.

x₁과 x₂는 0부터 1까지입니다. y값은 0 아래나 1 위로 벗어날 수 있어 되돌아가거나 지나치는 곡선을 만들 수 있습니다. 이 도구는 알아보기 쉽도록 y를 −0.5부터 1.5로 제한합니다.

운영체제에서 ‘움직임 줄이기’를 켰다면 재생 시 바로 도착 위치를 보여 줍니다. 결과 CSS를 실제 사이트에 쓸 때에도 prefers-reduced-motion 처리를 추가하세요. 투명도처럼 범위가 제한된 속성은 넘치는 값이 잘릴 수 있습니다.