CSS 3차 베지어 생성기
애니메이션의 가속과 마무리를 조정하고 전환이나 키프레임에 사용할 표준 CSS cubic-bezier() 시간 함수를 복사하세요.
시간 곡선
가로축: 경과 시간. 세로축: 애니메이션 진행률.
실시간 비교
사용 방법
사용 방법
- 일반 이징 프리셋을 선택하거나 x1, y1, x2, y2를 직접 입력하세요.
- 시간 곡선을 보고 사용자 움직임과 선형 애니메이션을 비교하세요.
- CSS 전환 또는 애니메이션 시간 함수에 쓸 cubic-bezier() 값을 복사하세요.
경로 곡선이 아닌 시간 곡선
CSS 3차 베지어 값은 경과 시간에 따른 애니메이션 진행률을 나타냅니다. 가로축은 시간, 세로축은 진행률이며 물체가 따라가는 기하학적 경로를 그리지 않습니다. 동일한 예시를 선형 시간 함수와 사용자 시간 함수로 움직여 비교합니다.
x 값이 제한되는 이유
CSS는 x1과 x2가 0과 1 사이일 것을 요구합니다. 시간 좌표가 곡선을 따라 앞으로 진행하고 각 애니메이션 시점의 진행률을 구할 수 있게 합니다. 이 생성기는 그 범위를 적용합니다. y1과 y2는 -2에서 3까지로 시작점 아래의 예비 동작이나 끝점을 넘는 움직임을 허용합니다.
바로 복사할 수 있는 브라우저 CSS
복사 값은 소수점 이하 최대 두 자리인 표준 cubic-bezier() 시간 함수입니다. transition-timing-function, animation-timing-function 또는 축약 속성에 쓸 수 있습니다. 그래프와 애니메이션은 브라우저에서 실행하며 물리적 움직임이나 모든 인터페이스에서 같은 체감 속도를 보장하지 않습니다.
자주 묻는 질문
더 알아보기
x1, y1, x2, y2는 무엇인가요?
3차 베지어 시간 곡선의 두 제어점입니다. 곡선은 항상 0,0에서 1,1로 가며 그 사이의 두 점을 선택합니다.
y가 0보다 작거나 1보다 클 수 있나요?
네. 음수 y는 진행 전의 잠깐 역방향 예비 동작, 1보다 큰 y는 최종값을 넘는 움직임을 나타냅니다. 이 도구는 -2에서 3까지 허용합니다.
왜 x는 0에서 1을 벗어날 수 없나요?
CSS cubic-bezier 시간 함수는 두 x 제어 값이 모두 그 구간에 있어야 합니다. 범위를 벗어나면 시간이 뒤로 접힐 수 있어 함수가 유효하지 않습니다.
SVG나 이동 경로를 만드나요?
아니요. CSS 시간 함수만 만듭니다. 요소를 기하학적 경로로 움직이려면 CSS motion-path 또는 SVG 경로 도구를 쓰세요.