01
동작에 가까운 프리셋부터 선택
화면에 들어오는 요소는 ease-out, 일반적인 상태 전환은 ease나 Material 표준을 먼저 비교하세요. 프리셋을 고르면 좌표 네 개가 함께 바뀌고, 이후 직접 수정하면 사용자 지정으로 표시됩니다.
HTML / CSS / 프런트엔드 코드
cubic-bezier 생성기움직임을 보고 CSS로 복사
제어점을 끌거나 네 좌표를 입력한 다음 실제 움직임을 확인하세요.
cubic-bezier 생성기
곡선 입력
제어점을 드래그하거나 방향키로 움직이세요. Shift를 누르면 이동 폭이 커집니다.
CSS 결과
cubic-bezier(0.25, 0.1, 0.25, 1)애니메이션 미리보기
입력한 곡선은 이 브라우저에서만 처리하며 서버로 보내지 않습니다.
옵션
점선은 일정한 속도의 진행을 나타냅니다.
곡선을 업데이트했습니다.
버튼이나 카드가 어색하게 움직이면 시간만 줄이기보다 시작과 끝의 속도를 살펴보세요. cubic-bezier 생성기는 두 제어점을 직접 움직여 곡선을 보면서 조정할 수 있어 숫자를 무작정 바꾸는 시행착오를 줄입니다.
이미 있는 cubic-bezier()를 붙여 넣고 선형 기준선과 비교해 보세요. 이징 곡선 편집기에서 CSS 애니메이션 미리보기를 한 번씩 재생하면 되돌림과 초과 이동이 실제로 어떻게 보이는지 알 수 있습니다.
cubic-bezier 생성기를 쓰는 이유
점과 숫자를 같이 편집하고 브라우저에서 한 번씩 움직임을 확인합니다.
두 제어점과 네 숫자가 연결됩니다
드래그, 키보드, 좌표 입력, 함수 가져오기가 같은 곡선을 바꿉니다. cubic-bezier 생성기는 입력한 소수 자릿수를 두 자리로 몰래 줄이지 않으므로 기존 디자인 시스템의 값을 그대로 다듬을 수 있습니다.
X 오류와 Y의 초과 이동을 구별합니다
CSS에서 X1과 X2는 0부터 1까지지만 Y에는 같은 제한이 없습니다. cubic-bezier 생성기는 범위를 벗어난 X를 입력하면 원문과 필드 오류를 보여 주며, Y가 1을 넘는 유효한 한 번의 초과 이동은 유지합니다.
프리셋을 고른 뒤 확인할 세 가지
02
시작과 끝을 따로 조절
첫 제어점은 시작, 두 번째 제어점은 마무리에 크게 작용합니다. 드래그한 X는 양끝에서 멈추지만 손으로 적은 잘못된 X는 보존한 채 오류를 알려 줍니다. Y는 0~1 밖으로 옮길 수 있습니다.
03
실제 길이로 다시 재생
기본 미리보기는 1000ms입니다. 시간을 바꾼 뒤 재생을 다시 눌러 비교하세요. 이 시간은 복사하는 함수에 포함되지 않으며 자동 업데이트를 끄면 Ctrl/Cmd+Enter로 결과를 만들 수 있습니다.
곡선 조절부터 CSS 복사까지
입력 방식이 서로 동기화됩니다
제어점 드래그, 방향키, 숫자 필드, 기존 함수 가져오기가 한 쌍의 제어점을 공유합니다. 선형 기준선을 켜면 CSS 애니메이션의 진행이 일정한 속도보다 빠른지 늦은지 비교할 수 있습니다.
브라우저가 실제 CSS로 재생합니다
미리보기는 생성된 cubic-bezier()를 브라우저 애니메이션의 easing으로 사용합니다. 곡선의 내부 매개변수를 시간으로 잘못 취급하지 않으며, 사용자가 누를 때만 한 번 움직입니다.
두 가지 CSS 형식으로 복사합니다
함수만 복사하면 animation 속성에, transition-timing-function 선언을 복사하면 규칙 블록에 붙일 수 있습니다. 입력이나 옵션이 바뀌어 결과가 오래되면 복사는 즉시 비활성화됩니다.
좌표 범위와 표현할 수 없는 움직임
- X는 0~1, Y는 범위 제한 없음
- X1·X2를 드래그하면 가장자리에서 멈춥니다. 손으로 입력하거나 가져온 X가 범위 밖이면 값은 그대로 남고 해당 필드의 오류가 표시됩니다. 음수 Y와 1보다 큰 Y도 유효한 CSS입니다.
- 한 구간은 여러 번 튀지 않습니다
- 한 개의 cubic-bezier()는 잠깐 뒤로 움직이거나 목표를 한 번 넘을 수 있습니다. 여러 번 튀는 bounce나 물리 spring은 표현하지 못하므로 keyframes 또는 별도 물리 모델이 필요합니다.
- 미리보기 시간은 출력과 별개
- 시간은 양수인 유한한 밀리초 값이어야 합니다. 시간을 바꿔도 네 좌표는 그대로이며 자동 반복 재생도 하지 않습니다.
- CSS 함수 한 개만 다룹니다
- 전체 스타일시트, 업로드 파일, URL은 읽지 않습니다. Tailwind·JS 내보내기, 프리셋 라이브러리, 완성된 @keyframes 생성도 제공하지 않습니다.
cubic-bezier 생성기 자주 묻는 질문
cubic-bezier가 뭔가요?
고정된 시작점 (0,0)과 끝점 (1,1) 사이에 제어점 두 개를 놓는 CSS 시간 함수입니다. X1·Y1·X2·Y2 네 숫자로 움직임의 시작과 끝 속도를 바꿉니다.
y값을 1보다 크게 하면 어떻게 되나요?
애니메이션 진행이 목표를 잠깐 넘어갔다가 돌아올 수 있습니다. Y가 1보다 크거나 0보다 작은 것은 유효하지만, 실제 속성에 따라 보이는 초과 이동의 크기는 달라집니다.
x값이 0~1로 제한되는 이유는 뭔가요?
X는 입력 시간의 진행을 나타냅니다. CSS 규칙은 두 X 좌표를 0에서 1로 제한해 시간에 대한 유효한 함수가 되도록 합니다. 범위를 벗어난 손입력은 이 도구가 멋대로 잘라내지 않습니다.
ease와 ease-in-out은 뭐가 다른가요?
ease는 시작과 끝이 비대칭인 기본 곡선입니다. ease-in-out은 양쪽이 비슷한 속도 변화를 보여 왕복 전환에 쓰기 쉽습니다. 같은 미리보기 시간으로 각각 재생해 보세요.
어디에 붙여 쓰나요?
복사한 함수를 transition-timing-function이나 animation-timing-function 값에 넣으세요. 선언 전체를 복사할 수도 있습니다. 시간과 반복 횟수는 실제 CSS에서 따로 정합니다.
다른 질문이 있나요?