CSS animation-timing-function Property

CSS animation-timing-function property specifies how the speed of the element being animated will progress over one cycle of its duration.

The timing function basically controls the speed of the animated element at different point of time during the animation. CSS has already defined several such functions for this purpose and we can easily use them. See the example below:


  animation-timing-function: ease;
  animation-timing-function: steps(10);

CSS Syntax

The animation-timing-function property has the following syntax:

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|steps(int,start|end)|step-start|step-end|cubic-bezier(p1,p2,p3,p4)|initial|inherit;

Property Values

The animation-timing-function property accepts the following values:

linearThe speed of the element remains constant throughout the animation.
easeSpeed is low in starting, then it increases gradually and again decreases before it reaches the end. This is the default value.
ease-inSpeed is low in staring and then it increases slowly.
ease-outSpeed decreases slowly before reaching the end.
ease-in-outThe element speeds up slowly and then again slows down before the end.
steps(int, start|end)The animation grows in steps. The total duration is divided among each step equally. The first parameter is the total number of steps in one cycle. It must be a positive number. The second parameter is optional. It sets to end if not specified.
step-startSame as steps(1, start)
step-endSame as steps(1, end)
cubic-bazier(p1,p2,p3,p4)Allow us to define our own timing curve. For example, ‘linear’ is the same as cubic-bazier(0, 0, 1, 1) and ‘ease’ is the same as cubic-bazier(0.25, 0.1, 0.25, 0.1). Similarly, we can define our own timing curve.
initialSets the animation-timing-function to its default value(ease).
inheritInherits the animation-timing-function property from the parent element.

General Info

Default Valueease
JavaScript Usageelement.style.animationTimingFunction = “steps(10)”