Custom transition curves
Generate a custom cubic-bezier() timing function for CSS animations and transitions. Adjust the four control point sliders to build a curve that controls how an animation accelerates and decelerates, then copy the CSS rule.
The visual graph plots the curve across time (the X-axis) and progression (the Y-axis), while the animated element previews the timing in real time.
Beyond standard easing
Standard CSS keywords like ease-in or ease-out cover basic movements. A custom curve allows for precise timing, such as a slow start that snaps quickly to the end, or an animation that overshoots its target and bounces back.
To create a bounce or elastic effect, set the y1 or y2 handles outside the 0 to 1 range. Values below 0 pull the animation backward before it starts, and values above 1 push the animation past its final state before settling.