CSS Transition Playground - Online Visual Easing Curve Builder

cubic-bezier() defines a cubic Bézier curve with four control points. The first point is always (0, 0) and the last is always (1, 1). You specify the two middle control points: P1(x1, y1) and P2(x2, y2). The x-axis represents time (0 to 1), and the y-axis represents the animation progress (0 to 1). The curve shows how the animation progresses over time — steep sections mean fast movement, flat sections mean slow or paused movement.

Yes! While x-values must stay within [0, 1] per the CSS spec, y-values can extend beyond 0-1. This creates overshoot or "bounce" effects. For example, cubic-bezier(0.68, -0.55, 0.265, 1.55) has y1 below 0 and y2 above 1, creating a playful bounce. Values below 0 cause the animation to briefly go in reverse before moving forward. Values above 1 cause it to overshoot the target before settling.

ease-in (0.42, 0, 1, 1): Starts slowly and accelerates toward the end. Best for elements entering the screen.
ease-out (0, 0, 0.58, 1): Starts fast and decelerates. Best for elements exiting or settling into place.
ease-in-out (0.42, 0, 0.58, 1): Slow start, fast middle, slow end. Symmetrical and great for looping animations or elements moving between two states.

Copy the generated CSS from the code block above and paste it into your stylesheet. You can apply it globally: * { transition-timing-function: cubic-bezier(...); } or to specific elements. You can also use CSS custom properties: :root { --my-ease: cubic-bezier(0.25, 0.1, 0.25, 1); } then reference it with transition-timing-function: var(--my-ease);.

CSS transitions on transform and opacity are highly performant because they can be GPU-accelerated and don't trigger layout recalculations. Transitions on properties like width, height, or margin trigger layout shifts and are more expensive. For best performance, stick to transform and opacity for animations, and use will-change sparingly on elements that will animate.

linear (0, 0, 1, 1) creates a perfectly uniform animation with no acceleration or deceleration. The progress moves at a constant speed from start to finish. It appears as a straight diagonal line on the curve graph. While it sounds ideal, it often feels mechanical and unnatural to users — most real-world motion has some easing.

Yes! The cubic-bezier() values work identically for animation-timing-function in @keyframes animations. You can apply them to the entire animation or to individual keyframe steps. The curve principles are the same — use this playground to find the perfect easing, then use it in your animations.