CSS3 animation-timing-function Property


Example

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

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

Try it Yourself »
More examples at the bottom of this page.

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-

Tag definition and usage instructions

animation-timing-function specifies how an animation will complete a cycle.

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

The speed curve is used to make changes smoother.

Default Value: ease
Inherited: no
version: CSS3
JavaScript Syntax: object object.style.animationTimingFunction="linear"

Syntax

animation-timing-function: value;

The mathematical function used by animation-timing-function is called a cubic Bézier curve, or speed curve. With this function, you can use your own values or use one of the predefined values:

Value Description Testing
linear The animation has the same speed from start to end. Testing
ease Default. The animation starts at a low speed, then speeds up, and slows down before the end. Testing
ease-in The animation starts at a low speed. Testing
ease-out The animation ends at a low speed. Testing
ease-in-out The animation starts and ends at a low speed. Testing
steps(int,start|end)

Specifies the number of intervals (steps) in the timing function. There are two parameters; the first parameter specifies the number of intervals, and this parameter must be a positive integer (greater than 0). The second parameter is optional, indicating whether the animation runs continuously from the beginning or the end of the time segment. The meanings are as follows:

  • start: indicates starting directly.
  • end: the default value, meaning it stops abruptly.
cubic-bezier(n,n,n,n) Your own values in the cubic-bezier function. Possible values are numbers from 0 to 1.

Tip:Please try using different values in the "Try it" feature below.

Examples

Online Examples


Example

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

/*Chrome, Safari and Opera*/ #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;} /*Standard Syntax*/ #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

Same as the example above, but the speed curve is defined through the cubic-bezier function:

#div1 {animation-timing-function:cubic-bezier(0,0,0.25,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);} /* Safari and Chrome: */ #div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,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 Yourself »

Related Articles

CSS3 Tutorial:CSS3 Animations

other extensions