Easing functions

animation-timing-function

Adjust the speed of an animation when it begins and ends to create smooth acceleration and deceleration effects.

Property values

One of these keyword values:

linear Constant time across the entire animation cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease Slowly increase to the mid-point, then slowly decrease to the end-point cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in A slow start and constant speed thereafter cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out Begin with a constant speed and finish up slowly cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out A slow start and a slow finish cubic-bezier(0.42, 0, 0.58, 1.0)
steps(N) Jump between states in N steps, each time incrementing 1/N of the total distance
step-start Jump immediately to the final state
step-end Stay at initial state until the animation duration has lapsed, then jump to the final state
cubic-bezier(x1,y1,x2,y2) Move from initial state (x1,y1) to the final state (x2,y2)

Examples

animation-timing-function: ease-in-out;
animation-timing-function: steps(4);
animation-timing-function: cubic-bezier(0.5, 0.1, 0.5, 1.0);
animation-timing-function
0

style > animation > animation-timing-functionEasing functions

🔗 🔎