곡선의 두 핸들(P1·P2)을 드래그하거나 프리셋을 고르면 속도 곡선이 바뀌어요. [미리보기 재생]으로 실제 움직임을 확인하고 [실행]을 누르면 아래 목록에 쌓여요.

cubic-bezier가 뭔가요?

애니메이션이 시작·끝에서 빨라지거나 느려지는 정도를 정하는 곡선이에요. transition·animation의 timing-function에 그대로 넣으면 돼요.

CSS는 어떻게 쓰나요?

CSS 상자나 각 결과의 복사 버튼을 누르면 `transition-timing-function: cubic-bezier(...)` CSS가 복사돼요.

CSS 이징 에디터

애니메이션 속도 곡선(cubic-bezier)을 눈으로 조절해 CSS로 복사합니다.

미리보기

P1 X

P1 Y

P2 X

P2 Y

CSS

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

곡선 핸들(P1·P2)을 드래그해 직접 조절할 수도 있어요.

곡선을 조절하고 [실행]을 누르면 여기에 쌓여요.