CSS3 animation-timing-function property

Definitions and usages

animation-timing-function: Specifies the animation speed curve.

The speed curve defines the time it takes for an animation to change from one set of CSS styles to another.

Speed curves are used to smooth changes.

Default: ease
Inherited: no
Version: CSS3
JavaScript syntax: object object.style.animationTimingFunction="linear"

Grammar 

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);
Value Describe Test
linear Animations have the same speed from start to finish. Test
ease The animation has a slow start, then a quick, slow end. Test
ease-in The animation has a slow start. Test
ease-out The animation ends slowly. Test
ease-in-out The animation has a slow start and a slow end. Test
cubic-bezier( n , n , n , n ) Define the velocity function in the cubic Bezier function. Possible values are numeric values from 0 to 1.

Tip: Try using a different value in the Try it out feature below.

CSS3 animation-timing-function property

Online instance

Play the animation at the same speed from start to finish:

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

Try it out . . .
There are more examples at the bottom of this page.

To better understand the different time function values, here are five different div elements that set five different values:

/* W3C and Opera: */
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

Try it out . . .

Same as in the previous example, but defined by the cubic-bezier function:

/* W3C and Opera: */
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Try it out . . .

Browser support

Property
animation-timing-function 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-

Related articles

CSS3 tutorial: CSS3 animation