X values control when the curve moves through time and must stay between 0 and 1.
로컬 CSS easing 생성기
실시간 미리보기로 CSS easing 곡선을 만드세요
cubic-bezier 네 제어점 값을 조정하고 움직임을 확인한 뒤 바로 붙여 넣을 CSS timing function을 복사하세요.
* 모든 처리는 브라우저에서 진행됩니다. 곡선 데이터는 업로드되지 않습니다.
CSS 준비 완료
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);QUICK GUIDE
작은 조정이 움직임을 바꿉니다
Y values control speed and can overshoot below 0 or above 1 for a springy feel.
Use the copy button to take the exact timing function into a transition or animation.
The preview uses the browser's own CSS animation engine, so it matches your pasted value.
FAQ
CSS easing questions
What does cubic-bezier mean?
It describes a curve between the start and end of an animation. Two control points shape its speed over time.
Why are x values limited?
CSS requires the first and third coordinates to be between 0 and 1 so the curve progresses forward through time.
Can y values overshoot?
Yes. Values below 0 or above 1 can create anticipation or overshoot. EasingBox allows a practical -2 to 2 editing range.