Generated CSS
A cubic bezier curve defines the acceleration of a CSS animation or transition over time. The cubic-bezier(x1, y1, x2, y2) function takes four values — two control point coordinates — that shape the velocity curve between the start (0,0) and end (1,1) states.
| Value | Range | Controls |
|---|---|---|
| x1 | 0 to 1 | Horizontal position of control point 1 |
| y1 | -∞ to ∞ | Vertical position of control point 1 (can overshoot) |
| x2 | 0 to 1 | Horizontal position of control point 2 |
| y2 | -∞ to ∞ | Vertical position of control point 2 (can overshoot) |
ease → cubic-bezier(0.25, 0.1, 0.25, 1.0) ease-in → cubic-bezier(0.42, 0, 1.0, 1.0) ease-out → cubic-bezier(0, 0, 0.58, 1.0) ease-in-out → cubic-bezier(0.42, 0, 0.58, 1.0) linear → cubic-bezier(0, 0, 1.0, 1.0)
Yes — Y values can be negative or greater than 1, creating "overshoot" effects like spring and bounce. X values must stay between 0 and 1 or the curve becomes undefined. This is why spring effects (like cubic-bezier(0.34, 1.56, 0.64, 1)) work — the Y1 of 1.56 causes the element to briefly overshoot its final position.
In the timing function position of transition and animation: transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1). You can also use it in animation-timing-function and even inside individual keyframes of a @keyframes block.
ease-out starts fast and ends slow — the element decelerates smoothly into its final position. A spring (Y values above 1) overshoot the target and then settles back, simulating physical momentum. Springs feel more alive and physical; ease-out feels controlled and professional.
Related tools: CSS Transition Generator · CSS Animation Generator