CSS 이징 커브

자주 묻는 질문

이 값은 어디에 넣나요?

transition-timing-function 이나 animation-timing-function 속성, 또는 transition 축약형의 타이밍 자리(예: transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1))에 넣습니다. 키워드 항목(ease, ease-in 등)은 브라우저 내장이고, cubic-bezier() 값도 모든 현대 브라우저에서 동작합니다.

스와치는 어떻게 읽나요?

가로축이 시작부터 끝까지의 시간, 세로축이 값이 움직인 정도입니다. 완만하게 시작해 가파르게 끝나는 커브(ease-in)는 천천히 출발해 가속하고, 반대 모양(ease-out)은 빠르게 출발해 부드럽게 멈춥니다. 옅은 가로선 두 줄이 0과 1 기준선이라, back 계열이 튕겨 나가는 구간이 눈에 보입니다.

out 커브와 in 커브는 언제 골라 쓰나요?

UI 에서는 ease-out 계열이 사실상 기본값입니다. 움직임이 빠르게 시작해 제자리에 감속하며 안착할 때 인터페이스가 반응성 있게 느껴집니다. ease-in 계열은 주로 화면을 떠나는 요소에, in-out 계열은 카드 위치 이동처럼 화면 안에서 시작해 화면 안에서 끝나는 움직임에 씁니다.

back 커브의 음수 값은 무슨 뜻인가요?

제어점이 0~1 범위를 벗어나면 값이 시작점이나 끝점을 살짝 지나쳤다가 되돌아옵니다. 작은 바운스처럼 읽히는 효과라 translate·scale 같은 transform 에는 잘 어울리지만, opacity 처럼 범위가 잘리는 속성에서는 오버슈트가 그냥 잘려 나가니 피하는 편이 좋습니다.