홈 › 디자인

CSS 이징 곡선 만들기

가로축은 시간, 세로축은 진행 정도예요. 조절점은 가로 0~1 안에서, 세로는 범위를 벗어나도 돼요(튕기는 효과).

입력한 내용은 서버로 보내지 않고 이 기기에서만 처리돼요
조절점 값 (x1, y1, x2, y2)
내 곡선
ease
linear

움직임의 ‘느낌’을 곡선으로 정해요

CSS 애니메이션은 시작과 끝 사이를 어떤 속도로 움직일지 이징 함수로 정해요. cubic-bezier(x1, y1, x2, y2)는 (0, 0)에서 시작해 (1, 1)에서 끝나는 3차 베지어 곡선이고, 가운데 두 조절점의 위치로 모양을 바꿔요. 가로축은 흐른 시간, 세로축은 움직인 정도예요. 곡선이 가파른 구간은 빠르게, 완만한 구간은 느리게 움직여요.

사용법

CSS 키워드와 같은 값

CSS 명세(CSS Easing Functions Level 1)는 자주 쓰는 곡선을 키워드로 정해 두었어요: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1). 고른 값이 키워드와 같으면 코드 주석에 알려 줘요. 화면에 들어오는 요소는 ease-out 계열(빨리 출발해 천천히 멈춤), 나가는 요소는 ease-in 계열이 자연스럽게 느껴지는 경우가 많아요.

범위를 넘는 값

명세상 x 값(x1, x2)은 0~1 사이여야 하고, 벗어나면 잘못된 값이 돼요. 그래서 조절점을 가로로는 0~1 안에서만 움직이게 했어요. y 값은 제한이 없어서 1보다 크게 하면 목표 지점을 살짝 지나쳤다 돌아오고(오버슈트), 0보다 작게 하면 뒤로 살짝 당겼다 출발하는 효과가 나요.

참고한 자료

자주 묻는 질문

통통 튀는(바운스) 효과도 만들 수 있나요?

cubic-bezier 하나로는 한 번 넘어갔다 돌아오는 정도까지만 돼요. 여러 번 튀는 효과는 @keyframes로 여러 구간을 나누거나 CSS linear() 함수를 써야 해요.

자바스크립트 애니메이션에도 쓸 수 있나요?

웹 애니메이션 API(element.animate)의 easing 옵션에 같은 cubic-bezier 문자열을 그대로 넣을 수 있어요.

숫자를 넣었는데 점이 안 움직여요.

x 값은 0~1 범위로 자동 조정돼요. 숫자 칸에서 다른 칸으로 넘어가면 정리된 값이 다시 표시돼요.

함께 쓰면 좋은 도구