CSS easing playground.
Shape a cubic Bézier curve, compare it with linear motion, and copy working CSS for your next animation.
Created by Navan SamiSame distance. Different feeling.
Easing maps elapsed time to animation progress. Linear moves steadily. A curve can start slowly, land gently, or overshoot. The graph’s horizontal axis is time; its vertical axis is progress.
Drag the yellow and blue handles. The dashed line is linear.
Playback starts only when you press Play. Pausing motion in the header stops playback. You can always inspect the curve with the time slider.
.moving-element {
transition: transform 1200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.moving-element.is-moved {
transform: translateX(200px);
}Add or remove the is-moved class to trigger the transition. Adjust 200px to suit your layout.
Read the curve.
A flatter section means less progress in the same amount of time. A steeper section means faster change. X coordinates stay between 0 and 1; Y coordinates can leave that range to create anticipation or overshoot.
These are timing curves, not physical springs. Try the same curve at different durations before choosing a motion for your interface.
Explore the cubic-bezier() reference ↗Which preset starts slowly and then speeds up?
Compare the presets before choosing.