왜 Y가 1보다 크거나 0보다 작아도 되나요?

오버슈트(튕김)·앤티시페이션(예비 동작) 효과는 Y가 [0, 1] 밖에 있어야 가능. CSS는 허용 — 애니메이션 값이 잠시 목표를 넘었다가 정착.

CSS는 X1·X2를 [0, 1]로 제한해 곡선이 시간의 함수가 되도록. 슬라이더가 X는 클램프하고, Y는 1 초과 / 0 미만 허용해 오버슈트 가능.

스프링 물리와 차이?

Cubic-bezier는 고정 시간 위의 결정적 곡선. 스프링(`linear(...)` 또는 JS)은 실제 물리 모델 — 모델은 다르지만 단순 케이스에선 비슷한 느낌.

CSS에서 어디에 써요?

`transition-timing-function: cubic-bezier(...)` 또는 `animation-timing-function:`. Tailwind: `ease-[cubic-bezier(...)]`.

CSS Cubic-Bezier 곡선 생성기

`cubic-bezier(x1, y1, x2, y2)` CSS 타이밍 함수의 인터랙티브 편집기. 곡선의 두 핸들을 드래그하거나 좌표를 직접 입력. Y 값은 [0, 1] 밖으로 나가 오버슈트나 앤티시페이션 효과 가능. 선택한 시간 동안 곡선으로 왔다 갔다 하는 프리뷰 블록으로 실제 모션 체감. 기본 CSS 키워드(ease·ease-in/out) + 유용한 커스텀 곡선 프리셋.

—

프리셋

p1xp1yp2xp2y

시간: 1.5s

프리뷰 애니메이션

CSS

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

transition-timing-function 또는 animation-timing-function와 함께 사용.

사용법

파란색·빨간색 핸들을 드래그해 곡선 모양 조정.
또는 프리셋(ease·ease-in-out·overshoot…) 선택.
재생을 눌러 선택한 시간으로 모션 체감 후 CSS 복사.

자주 묻는 질문

왜 Y가 1보다 크거나 0보다 작아도 되나요?: 오버슈트(튕김)·앤티시페이션(예비 동작) 효과는 Y가 [0, 1] 밖에 있어야 가능. CSS는 허용 — 애니메이션 값이 잠시 목표를 넘었다가 정착.
X 값은요?: CSS는 X1·X2를 [0, 1]로 제한해 곡선이 시간의 함수가 되도록. 슬라이더가 X는 클램프하고, Y는 1 초과 / 0 미만 허용해 오버슈트 가능.
스프링 물리와 차이?: Cubic-bezier는 고정 시간 위의 결정적 곡선. 스프링(`linear(...)` 또는 JS)은 실제 물리 모델 — 모델은 다르지만 단순 케이스에선 비슷한 느낌.
CSS에서 어디에 써요?: `transition-timing-function: cubic-bezier(...)` 또는 `animation-timing-function:`. Tailwind: `ease-[cubic-bezier(...)]`.

CSS Cubic-Bezier 곡선 생성기

사용법

자주 묻는 질문

관련 도구

CSS 애니메이션 생성기

CSS 그라디언트 생성기

CSS Box Shadow 생성기

CSS 필터 플레이그라운드

Border Radius 생성기

CSS 삼각형 생성기