tool · one of 51 free, no counter
Easing
What timing function gives this animation the feel I want?
A curve is hard to judge from four numbers, and a spring is usually a JavaScript dependency. This draws the curve as you move it, replays it on a moving ball at the duration you set, and writes the spring out as CSS linear() - the same motion sampled at even steps over the time it takes to settle - so the physics ships as a stylesheet with no script behind it.
Reach it Press ⌘ + K on any tab and type easing. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
a cubic-bezier or spring curve as css, with a preview to replayTuning a menu that opens too stiffly, matching the overshoot of a native control, or replacing a spring library with a single line of CSS. The settle time and the overshoot are printed, so two springs can be compared by number as well as by eye.
Asked about this tool
3 of themHow is a spring turned into CSS?
It is simulated until it settles, and the position is sampled at even steps into a linear() timing function. The transition gets the settle time as its duration, so the motion and the length match.
What happens on a browser without linear()?
The declaration is ignored and the transition falls back to its default easing. Chrome 113, Firefox 112 and Safari 17.2 all support it, which covers nearly every browser in use.
Can a cubic-bezier overshoot?
Yes - the y values may go below 0 or above 1, and the preview draws it. The x values are held between 0 and 1, because CSS rejects anything outside them.
how to use easing
- Open Easing and choose cubic-bezier or spring.
- Start from a preset, or move the four control points or the spring dials.
- Press Replay to watch the ball follow the curve at the duration you set.
- Copy the transition declaration that is written underneath.
96 of these · no host permissions · three free audits