- 파란·주황 제어점을 드래그해 곡선 모양을 조절합니다.
- 아래 미리보기에서 실제 움직임을 확인합니다.
- 프리셋으로 빠르게 시작하거나, CSS 값 복사로 cubic-bezier() 값을 가져갑니다.
cubic-bezier(x1, y1, x2, y2)의 네 숫자는 두 제어점의 좌표입니다. 가로축(x)은 시간, 세로축(y)은 진행 정도를 나타내며, 곡선이 가파른 구간은 빠르게, 완만한 구간은 느리게 움직입니다.
- x 값 (시간): 항상 0~1 사이여야 합니다. 시간 축을 거꾸로 가거나 벗어날 수 없기 때문입니다.
- y 값 (진행): 0~1을 넘어 음수나 1 이상도 가능합니다. 이때 목표를 지나쳤다 돌아오는 튕김(오버슈트)이 생깁니다.
- 곡선 읽기: 처음이 가파르면 빠르게 시작(ease-in), 끝이 완만하면 천천히 멈춤(ease-out)입니다.
각 숫자의 의미와 자주 쓰는 곡선 레시피는 이징 곡선 입문에 정리했습니다.
- 자연스러운 등장: 요소가 나타날 때는 ease-out 계열(처음 빠르고 끝에 천천히)이 부드럽게 느껴집니다.
- 튕김 효과: 제어점 y를 0 아래나 1 위로 끌면 목표를 살짝 지나쳤다 돌아오는 탄력 있는 움직임을 만들 수 있습니다.
- 지속시간과 함께: 같은 곡선이라도 transition 시간이 길고 짧음에 따라 느낌이 다릅니다. 0.2~0.4초가 UI에 흔히 쓰입니다.
CSS의 transition이나 animation에서 시간에 따른 변화 속도(이징)를 정의할 때 씁니다. transition-timing-function: cubic-bezier(...) 형태로 넣으면 됩니다. 기본 ease·linear로는 표현하기 어려운, 처음에 빠르다 천천히 멈추거나 살짝 튀는 듯한 자연스러운 움직임을 만들 수 있습니다.
네. 제어점의 y 값은 0보다 작거나 1보다 클 수 있습니다. 이렇게 하면 목표 지점을 잠깐 지나쳤다가 되돌아오는 '오버슈트(튕김)' 효과를 만들 수 있습니다. 다만 x 값(0~1)은 시간 축이라 그 범위를 벗어날 수 없습니다.
표시된 cubic-bezier(...) 값을 복사해 CSS의 transition-timing-function이나 animation-timing-function에 그대로 붙여넣으면 됩니다. 예를 들어 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); 처럼 사용합니다.
둘 다 시작과 끝이 부드러운 곡선이지만 ease는 시작을 조금 더 빠르게 치고 나가 기본값으로 흔히 쓰이고, ease-in-out은 시작과 끝의 가속·감속이 더 대칭적이라 왕복하거나 부드럽게 오가는 움직임에 어울립니다. 이 도구의 프리셋으로 두 곡선을 번갈아 적용해 미리보기로 차이를 비교해 보세요.
제어점 y를 0 아래나 1 위로 끌면 목표를 살짝 지나쳤다 돌아오는 탄력이 생기는데, 과하면 멀미가 날 만큼 출렁입니다. 오버슈트는 작게 주고 지속시간을 0.3초 안팎으로 짧게 잡으면 경쾌하면서도 부담스럽지 않습니다. 버튼 클릭이나 모달 등장처럼 강조하고 싶은 한두 곳에만 쓰는 것이 좋습니다.