CSS animation-timing-function Property

Definition and Usage

animation-timing-function Specify the animation's speed curve.

Speed curves define the time it takes for an animation to transition from one set of CSS styles to another.

Speed curves are used to make changes smoother.

See also:

CSS3 Tutorial:CSS Animation

HTML DOM Reference Manual:animationTimingFunction Property

Example

Example 1

Play the animation at the same speed from the beginning to the end:

div
{
animation-timing-function:2s;
}

Try It Yourself

Example 2

To better understand the different values of timing functions, five different div elements with five different values are provided here:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Try It Yourself

Example 3

Same as the previous example, but defines the speed curve through the cubic-bezier function:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Try It Yourself

CSS Syntax

animation-timing-function: value;

The animation-timing-function uses a mathematical function named cubic-bezier (Cubic Bezier) to generate a speed curve. You can use your own values in this function, as well as predefined values:

Value Description Test
linear The speed of the animation is the same from start to finish. Test
ease Default. Animation starts slowly, then speeds up, and slows down before ending. Test
ease-in Animation starts slowly. Test
ease-out Animation ends slowly. Test
ease-in-out Animation starts and ends slowly. Test
cubic-bezier(n,n,n,n) Your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.

Tip:Try different values in the 'Try It Yourself' feature below.

Technical Details

Default Value: ease
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.animationTimingFunction="linear"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -webkit-, -moz-, or -o- prefixes indicate the first version using the prefix.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-