본문으로 건너뛰기
작업 데이터는 서버에 저장하지 않고, 내 브라우저에서 처리합니다.
tools
CSS cubic-bezier 이징 생성기

CSS cubic-bezier 이징 생성기

두 컨트롤 포인트를 드래그해 CSS 애니메이션·transition용 cubic-bezier 곡선을 만들고 동작을 미리 봅니다.

집중모드

두 컨트롤 포인트를 드래그해 곡선을 조절하세요.

cubic-bezier(0.25, 0.1, 0.25, 1)
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
x10.25y10.1x20.25y21

주요 기능

  • SVG 그래프에서 두 컨트롤 포인트를 드래그해 이징 곡선을 편집합니다.
  • CSS 규칙에 맞춰 x 좌표는 0~1, y 좌표는 -0.5~1.5 범위로 조절합니다.
  • linear, ease, ease-in, ease-out, ease-in-out 프리셋을 제공합니다.
  • 공의 왕복 애니메이션으로 속도 변화를 반복 재생합니다.
  • cubic-bezier() 값과 transition-timing-function 선언을 각각 복사합니다.

사용 방법

  1. 프리셋을 고르거나 그래프의 두 점을 드래그합니다.
  2. 애니메이션 미리보기로 가속과 감속을 확인합니다.
  3. cubic-bezier 값 또는 CSS 선언을 복사합니다.

활용 예시

  • 버튼과 패널 전환 감각 조정

    컨트롤 포인트를 움직이며 애니메이션 미리보기를 반복해 원하는 가속과 감속 곡선을 찾을 수 있습니다.

  • CSS 이징 값 전달

    linear·ease 계열 프리셋에서 시작해 조정한 cubic-bezier 값이나 전체 transition-timing-function 선언을 복사할 수 있습니다.

개인정보 보호

곡선 편집, 애니메이션 미리보기와 CSS 생성은 브라우저에서 처리됩니다.

자주 묻는 질문

기본 CSS 이징 프리셋에서 시작할 수 있나요?
네. linear, ease, ease-in, ease-out, ease-in-out 프리셋을 선택한 뒤 두 컨트롤 포인트를 조정할 수 있습니다.
생성 결과는 어떤 형태로 복사되나요?
cubic-bezier(x1, y1, x2, y2) 값과 transition-timing-function 전체 선언을 각각 복사할 수 있습니다.

관련 도구