ToolPal

CSS Cubic Bezier 생성기

드래그 가능한 제어점 편집기와 실시간 애니메이션 미리보기로 CSS cubic-bezier 이징 곡선을 시각적으로 만들 수 있습니다.

1001

색상이 있는 제어점을 드래그해 곡선을 조절하세요. Y 값은 오버슈트를 위해 0 미만이나 1 초과도 가능합니다.

색 강도는 곡선을 11개 균등 시점에서 샘플링한 결과입니다.

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

/* with shorthand */
transition: all 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);

/* on a keyframe animation */
animation: my-anim 1000ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;

사용 방법

드래그 가능한 제어점 편집기와 실시간 애니메이션 미리보기로 CSS cubic-bezier 이징 곡선을 시각적으로 만들 수 있습니다.

  1. 1프리셋(ease, ease-in-out, ease-out-back 등)을 클릭해 시작 곡선을 불러오세요.
  2. 2곡선 패널의 두 색상 제어점을 드래그해 이징을 조절하세요 — Y는 오버슈트를 위해 0과 1을 벗어날 수 있습니다.
  3. 3실시간 애니메이션 미리보기로 모션을 확인하세요. 재생 속도는 시간 슬라이더로 조절할 수 있습니다.
  4. 4x1 / y1 / x2 / y2 숫자 입력 필드에 정확한 값을 입력해 미세 조정할 수 있습니다.
  5. 5'복사' 버튼을 눌러 cubic-bezier(...) 값을 복사한 뒤 CSS 트랜지션이나 애니메이션에 붙여넣으세요.

주요 기능

  • 오버슈트 범위까지 지원하는 드래그 제어점 — Y는 음수나 1 초과로 설정해 스프링 모션을 만들 수 있습니다
  • 오버슈트 프리셋(ease-out-back, ease-in-out-back, elastic) 포함 8가지 프리셋
  • 재생 시간 조절과 재생 버튼이 있는 실시간 데모 — 복사하기 전에 곡선의 느낌을 직접 확인
  • 시각적 편집기와 동기화되는 x1/y1/x2/y2 숫자 필드 — 어느 쪽으로도 정밀 조정 가능
  • 단독 cubic-bezier() 값과 완성된 transition/animation 스니펫까지 함께 출력

자주 묻는 질문

더 알아보기