Cubic Bezier 생성기

cubic-bezier 이징 곡선이란

CSS 애니메이션과 트랜지션은 두 상태 사이를 시간에 걸쳐 이동하며, 타이밍 함수가 그 진행 속도를 결정합니다 — 느리게 시작해 빨라지거나, 빠르게 시작해 느려지거나, 살짝 튀어 오르게 할 수도 있습니다. cubic-bezier(x1, y1, x2, y2)는 시작점 (0,0)에서 끝점 (1,1)로 이어지는 곡선 위의 두 제어점으로 이 속도를 정의합니다. 이 편집기에서는 두 핸들을 드래그해 곡선을 직접 만들 수 있어, 숫자를 추측하는 대신 움직임을 느끼며 조절할 수 있습니다.

사용 방법

파란색·보라색 핸들을 드래그해 곡선을 구부리거나, ease, ease-in-out, linear 같은 프리셋에서 시작하세요. 정확한 값이 필요하면 X/Y 칸에 직접 입력하면 됩니다 — 두 X 값은 CSS 규칙에 따라 0–1 안으로 고정되고, Y는 그 범위를 벗어나 바운스나 예비 동작(anticipation)을 만들 수 있습니다. 움직이는 점이 실제 모션을 미리 보여주며, 클릭 한 번으로 cubic-bezier() 값이나 스타일시트에 바로 붙여넣을 수 있는 transition-timing-function 선언을 복사합니다.