vaweGitHub

EasingCSS keywords

CSS ease

The CSS default: a quick start and a long, soft end.

ease reaches 50% of its travel at 29% of the time and 90% at 62%. Its peak speed is 2.29x the average.

CSS keywordspeak 2.29x

Progress against time0100.51progress50%90%
The dashed line is linear. The dots mark 50% and 90% of the travel.
Velocity, in multiples of average speed01200.51speed, x average
The dashed line is 1x, the speed of linear.

Live demo

The blue box uses the exact linear() string below, in your browser. The grey box is linear.

ease
linear

Your system asks for reduced motion, so the boxes rest at the end of the move.

Numbers

50% of travel
29%of the time
90% of travel
62%of the time
After 10% of time
9.48%of the travel is done
Peak speed
2.29xtimes the average
Overshoot
0%stays inside the end
Undershoot
0%never below the start
linear() points
41at a 0.002 tolerance
cubic-bezier
exactworst gap 0.0 points

Copy the code

css linear() (exact)
animation-timing-function: linear(0, 0.0131, 0.033, 0.0601, 0.0948, 0.1369, 0.1855, 0.2389, 0.2952, 0.3524, 0.4085, 0.4624, 0.5133, 0.5608, 0.6048, 0.6453, 0.6825, 0.7166, 0.7479, 0.7764, 0.8024, 0.8261, 0.8478, 0.8674, 0.8852, 0.9014, 0.9159, 0.929, 0.9408, 0.9512, 0.9605, 0.9686, 0.9756, 0.9817, 0.9868, 0.991, 0.9943, 0.9969, 0.9986, 0.9997, 1);
cubic-bezier (the keyword's definition)
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
web animations api
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 600, easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)', fill: 'both' });
css
animation: slide 600ms ease;

When to use it, and when to avoid it

Use it for

  • A first pass on a UI change when you have not chosen a curve.
  • Hover and focus changes under 300 ms.

Avoid it for

  • Film moves over 0.3 s: it is the browser default, not a choice. Use land or settle.
  • Loops. It ends slowly and starts fast, so a repeat shows a seam.

The nearest vawe ease

The closest of the nine vawe After Effects eases is leave, an RMS gap of 0.1135 in progress. After Effects and vawe set the shape with two handles, so it can be tuned where a named curve cannot.