animation-timing-function CSS Property

The animation-timing-function (easing) describes how the animation progresses between pairs of keyframes. Initial value is ease.

.box { animation-timing-function: ease-out; }

.bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

linearUniform rate.

easeThe default value. Fast start, slows toward end.

ease-inSlow start.

ease-outSlow end.

ease-in-outSlow at both ends.

step-startJumps to end value immediately.

step-endJumps to end value at the end.

cubic-bezier()Custom curve (x1,y1,x2,y2).

steps()Step-wise — steps(n, position?).

linear()Linear easing with control points.

CSS Animations Level 1

Editor's Draft

CSS

Show all code