cubic-bezier 생성기

CSS 이징 곡선을 드래그로 조절해 코드를 만듭니다.

두 개의 파란 점을 끌어 곡선을 조절하세요. transition-timing-function에 사용합니다.

transition을 걸었는데 움직임이 어딘가 뻣뻣하게 느껴질 때가 있습니다. 대개는 시간이 아니라 '속도가 변하는 방식', 즉 이징 곡선 때문입니다.

이 도구는 곡선의 제어점 두 개를 마우스나 손가락으로 끌어 조절하고, 공이 움직이는 모습으로 결과를 확인한 뒤 CSS 코드를 복사할 수 있게 해 줍니다.

어떻게 계산되나요

곡선을 읽는 법

가로축은 시간의 진행(0 = 시작, 1 = 끝), 세로축은 애니메이션의 진행 정도(0 = 시작 위치, 1 = 끝 위치)입니다. 곡선이 가파른 구간은 빠르게, 완만한 구간은 느리게 움직인다는 뜻입니다.

cubic-bezier(x1, y1, x2, y2)의 네 숫자는 파란 점 두 개의 좌표입니다. 앞 두 개가 첫 번째 점, 뒤 두 개가 두 번째 점입니다.

조작 방법

파란 점을 끌어 곡선을 바꿉니다. 값은 실시간으로 코드에 반영됩니다.
프리셋 버튼(ease, linear, ease-in, ease-out, ease-in-out, bounce)으로 기본 곡선을 불러올 수 있습니다.
미리보기 버튼을 누르면 그 곡선으로 실제 움직임을 보여 줍니다.

시간축(x)은 0~1을 벗어날 수 없지만 진행값(y)은 1을 넘거나 0보다 작아도 됩니다. bounce 프리셋처럼 y가 범위를 벗어나면 목표 지점을 지나쳤다 되돌아오는 '튕기는' 느낌이 납니다.

어디에 넣나

복사한 값은 transition-timing-function에 그대로 쓰거나, transition: transform .3s cubic-bezier(...) 형태로 축약해 넣습니다. animation-timing-function에도 같은 값을 쓸 수 있습니다.

용어 정리

이징(easing): 애니메이션이 진행되는 동안 속도가 어떻게 변하는지를 정하는 규칙입니다.
cubic-bezier(x1,y1,x2,y2): 제어점 두 개의 좌표로 이징 곡선을 직접 정의하는 함수입니다.
제어점: 곡선을 잡아당기는 파란 점입니다. 시작점(0,0)과 끝점(1,1)은 고정되어 있습니다.
transition-timing-function: transition에 이징 곡선을 지정하는 속성입니다. animation에는 animation-timing-function을 씁니다.
오버슈트: y값이 0~1을 벗어나 목표를 지나쳤다 돌아오는 움직임입니다. bounce 프리셋이 이에 해당합니다.

자주 묻는 질문

ease와 linear는 어떻게 다른가요?

`linear`는 처음부터 끝까지 같은 속도로 움직여 기계적인 느낌이 납니다. `ease`(기본값)는 빠르게 시작해 끝에서 서서히 감속해 자연스럽게 보입니다. 대부분의 UI 움직임에는 `ease` 계열이 무난합니다.

가로축 값을 1보다 크게 넣을 수 있나요?

없습니다. 시간축(x1, x2)은 0에서 1 사이만 유효하고 벗어나면 브라우저가 값을 무시합니다. 반면 세로축(y1, y2)은 범위를 벗어나도 되며, 이때 목표를 지나쳤다 되돌아오는 효과가 생깁니다.

transition에 어떻게 넣나요?

`transition: transform .3s cubic-bezier(.25,.1,.25,1);`처럼 시간 뒤에 붙이거나, `transition-timing-function`으로 따로 지정하면 됩니다. 복사되는 코드는 후자 형태이니 필요에 맞게 옮겨 쓰세요.

곡선이 애니메이션에서도 그대로 적용되나요?

`@keyframes` 애니메이션에는 `animation-timing-function`에 같은 값을 넣으면 됩니다. 다만 키프레임마다 이징을 따로 지정할 수도 있어, 구간별로 다른 곡선을 쓰고 싶다면 각 키프레임 안에 지정하는 방법도 있습니다.

튕기는 효과는 아무 데나 써도 되나요?

버튼 확대나 알림 등장처럼 짧고 눈에 띄어야 하는 곳에는 잘 어울리지만, 목록이 열리거나 페이지가 전환되는 큰 움직임에 쓰면 산만해 보이기 쉽습니다. 넓은 면적이 움직일수록 완만한 곡선이 편안합니다.