이 cubic-bezier 생성기는 숫자 네 개를 CSS 이징 함수로 바꾸고 그 값이 어떤 움직임을 만드는지 보여 줍니다. 곡선 위의 두 핸들을 끌거나 x1, y1, x2, y2를 입력하면, 나란한 두 트랙에서 공 두 개가 달립니다. 하나는 linear 속도, 하나는 내 곡선이라 느낌의 차이가 분명히 보입니다. 복사 버튼은 값을 transition-timing-function, transition 단축 속성, animation-timing-function, CSS 변수 형태로 줍니다.
애니메이션 타이밍은 UI가 산뜻하게 느껴지느냐, 굼뜨거나 기계적으로 느껴지느냐를 가릅니다. 내장 키워드 ease, ease-in, ease-out, ease-in-out은 넓은 곡선 공간의 네 점일 뿐입니다. 빠르게 시작해서 부드럽게 내려앉는 퇴장이나 버튼을 눌렀을 때 살짝 튀어나가는 오버슈트가 필요하다면 짐작하는 대신 여기서 제어점을 조정하세요.
기본값은 cubic-bezier(0.42, 0, 0.58, 1)로 ease-in-out 키워드와 같은 곡선이며, 숫자가 CSS 키워드와 일치하거나 0~1 범위를 넘으면 배지로 알려 줍니다. 모든 처리는 브라우저 안에서 이루어지고 업로드되는 것은 없습니다.
사용 방법
첫 번째 점(x1, y1) 놓기
첫 번째 핸들을 끌거나 방향키를 쓰거나 숫자를 입력합니다. 움직임의 시작을 좌우합니다. x1은 0에서 1 사이이며, 드래그·방향키·직접 입력 모두 y1을 -2에서 2까지 움직일 수 있습니다.
두 번째 점(x2, y2) 놓기
두 번째 핸들은 움직임이 어떻게 도착하는지를 좌우합니다. x2는 0~1이며, 드래그·방향키·직접 입력 모두 y2를 -2~2까지 움직일 수 있습니다. 방향키는 0.01씩, Shift와 함께 누르면 0.1씩 움직입니다.
곡선 읽기
대각선은 등속 운동입니다. 그 아래로 처지는 곡선은 느리게 시작한다는 뜻이고, 위로 솟는 곡선은 빠르게 시작한다는 뜻입니다.
달리기 구경하기
아래쪽 공은 내 타이밍 함수, 위쪽 공은
linear를 씁니다. 둘은 같이 출발해 같이 도착하므로 그래프만 읽지 않고 가속, 감속, 오버슈트를 직접 느낄 수 있습니다. 지속 시간 슬라이더로 한 번 달리는 시간을 정합니다.타이밍 함수 복사
필요한 탭(
transition-timing-function, 미리보기 지속 시간을 쓴transition단축 속성,animation-timing-function,--ease변수)을 골라 복사하거나, 타이밍 함수가 들어가는 어디든cubic-bezier(...)부분만 붙여 넣습니다.
작동 원리
네 숫자가 정의하는 것
W3C의 CSS Easing Functions Level 1은 cubic-bezier(x1, y1, x2, y2)를 양 끝점이 P0 = (0, 0), P3 = (1, 1)로 고정된 3차 베지어 곡선으로 정의합니다. 입력한 숫자 쌍이 제어점 P1과 P2입니다. 가로축은 전체 지속 시간에 대한 경과 비율, 세로축은 전체 변화량에 대한 진행 비율입니다.
매개변수 t가 0에서 1까지 움직일 때 곡선은 B(t) = 3(1-t)^2 t P1 + 3(1-t) t^2 P2 + t^3 P3이며, 끝점 항은 단순화한 식입니다. 브라우저는 x가 경과 시간 비율과 같아지는 t를 찾아 그에 대응하는 y를 진행도로 돌려줍니다. cubic-bezier(0.42, 0, 0.58, 1)에서 B(0.5)는 정확히 (0.5, 0.5)입니다. 경과 시간 25% 지점에서 움직임은 약 12.9% 진행됩니다.
| 키워드 | 같은 cubic-bezier |
|---|---|
| linear | 곡선 없음 (cubic-bezier가 아님) |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
x는 0~1, y는 자유로운 이유
명세는 x1과 x2가 [0, 1] 범위에 있어야 한다고 요구합니다. 그렇지 않으면 곡선이 시간을 거슬러 되돌아가 한 시점이 여러 진행값에 대응하게 됩니다. y에는 그런 규칙이 없으므로, 제어점의 y가 1보다 크면 목표를 넘어갔다가 돌아오는 오버슈트가, 0보다 작으면 먼저 뒤로 물러나는 예비 동작이 생깁니다. 이 도구는 실용적인 범위를 덮는 -2에서 2까지를 받습니다.
cubic-bezier(0.34, 1.56, 0.64, 1)의 B(0.5)는 약 (0.4925, 1.085)로, 시간이 절반쯤 지났을 때 이미 목적지를 8.5% 넘어선다는 뜻입니다. 곡선은 1.098 근처에서 정점을 찍고 1로 돌아오므로 이동 거리의 약 10%만큼 살짝 튀는 효과가 납니다.
용도에 맞는 곡선 고르기
화면에 들어오는 요소는 사용자 입력에 즉시 반응하는 느낌을 주는 ease-out, 즉 빠르게 시작해 감속하는 곡선이 보통 잘 맞습니다. 나가는 요소에는 ease-in, 화면 안의 두 위치 사이 이동에는 ease-in-out이 어울립니다. cubic-bezier(0.25, 1, 0.5, 1) 같은 강한 ease-out은 시작이 가파르고 길게 가라앉습니다. B(0.5)에서 이미 거리의 약 87.5%를 이동했습니다.
실제 예시
x1 0.42, y1 0, x2 0.58, y2 1transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);ease-in-out 키워드와 같은 곡선입니다.
x1 0, y1 0, x2 0.58, y2 1transition-timing-function: cubic-bezier(0, 0, 0.58, 1);ease-out과 같습니다. 매개변수 50% 지점에서 시간은 34%이고 진행도는 50%입니다.
x1 0.34, y1 1.56, x2 0.64, y2 1transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);요소가 목표를 약 10% 넘어갔다가 돌아옵니다. 팝오버와 토글 손잡이에 좋습니다.
x1 0.25, y1 1, x2 0.5, y2 1transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);흔히 ease-out-quart라고 부릅니다. 거리의 대부분을 지속 시간의 앞 3분의 1 안에 이동합니다.
x1 0.1234567, y1 0, x2 0.9, y2 1 / 이어서 x1 1.2cubic-bezier(0.123, 0, 0.9, 1) / x는 0에서 1 사이여야 합니다. 범위를 벗어나면 브라우저가 함수 전체를 무시합니다.값은 소수 셋째 자리로 반올림됩니다. x가 0~1, y가 -2~2를 벗어나면 메시지가 나오고 CSS는 만들어지지 않습니다.
자주 하는 실수
x 값을 1보다 크게 입력
x1이나 x2가 0~1을 벗어나면 브라우저에서
cubic-bezier()선언 전체가 무효가 되어 무시되고 기본값ease로 돌아갑니다. 이 도구는 그런 값을 거부합니다.곡선보다 지속 시간이 더 중요
완벽한 곡선도 1200ms 전환에서는 여전히 느립니다. 대부분의 UI 전환은 150~300ms가 적당하고, 긴 시간은 큰 이동이나 페이지 단위 연출에 씁니다.
범위가 정해진 속성에 오버슈트
오버슈트는 진행도에 적용되므로
opacity는 1을 넘었다가 고정되어 멈춘 것처럼 보이고,height는 목표를 잠깐 넘어갈 수 있습니다. 오버슈트 곡선은 opacity가 아니라transform에 쓰세요.곡선을 속도 그래프로 착각
세로축은 속도가 아니라 위치 또는 진행도입니다. 가파른 구간이 빠른 움직임, 평평한 구간이 느린 움직임입니다. 빠르게 올라갔다가 평평해지는 곡선이 감속입니다.
타이밍이 구간마다 적용된다는 점을 놓침
@keyframes에서animation-timing-function은 애니메이션 전체에 한 번이 아니라 키프레임 사이마다 적용됩니다. 그래서 여러 단계 애니메이션은linear로 하거나 키프레임별로 속성을 정하지 않으면 매 단계마다 이징이 걸립니다.
자주 묻는 질문
cubic-bezier의 숫자 네 개는 무슨 뜻인가요?
두 제어점의 x, y 좌표입니다. 시작점 (0, 0)과 끝점 (1, 1)은 고정입니다. 첫 번째 쌍이 움직임의 시작 모양을, 두 번째 쌍이 끝 모양을 정합니다.
CSS 기본 ease 곡선은 무엇인가요?
ease 키워드는 cubic-bezier(0.25, 0.1, 0.25, 1)입니다. 끝보다 시작이 약간 빠르며 transition의 브라우저 기본값입니다.
ease-out 애니메이션은 어떻게 만드나요?
표준 곡선은 cubic-bezier(0, 0, 0.58, 1), 더 길고 극적인 감속은 cubic-bezier(0.25, 1, 0.5, 1) 같은 강한 곡선을 쓰세요.
요소가 살짝 넘어갔다가 되돌아오게 하려면?
cubic-bezier(0.34, 1.56, 0.64, 1)처럼 y1이나 y2를 1보다 크게 올립니다. 진행도가 100%를 넘었다가 돌아옵니다. 이 도구는 y를 2까지 받습니다.
x 값이 0~1로 제한되는 이유는?
x는 시간을 나타내고, 명세는 곡선이 시간을 거슬러 가지 않도록 제어점을 시간 범위 안에 두라고 요구합니다. 범위를 벗어나면 브라우저는 그 함수를 무효로 취급합니다.
내 곡선이 그냥 내장 키워드인지 어떻게 알 수 있나요?
네 숫자가 ease, ease-in, ease-out, ease-in-out과 같으면 배지가 알려 주므로 더 짧은 키워드로 써도 됩니다. y가 1보다 크거나 0보다 작은 곡선에는 정점 퍼센트가 적힌 오버슈트 배지가 붙습니다.
cubic-bezier와 steps() 함수는 다른가요?
다릅니다. cubic-bezier()는 연속적이고 매끄러운 반면 steps()는 스프라이트 애니메이션처럼 불연속한 위치로 점프합니다. 둘 다 아닌 키워드는 linear뿐입니다.
같은 값을 animation-timing-function에도 쓸 수 있나요?
네. cubic-bezier(...) 부분은 transition-timing-function, animation-timing-function, 그리고 transition과 animation 단축 속성 안에서 모두 동작합니다.
마지막 업데이트: