CSS3 animation-timing-function Property
Example
Play the animation at the same speed from start to finish:
animation-timing-function: linear;
-webkit-animation-timing-function: linear; /* Safari and Chrome */
Browser Support
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animation-timing-function | 43.0 <br>4.0 -webkit- | 10.0 | 16.0 <br>5.0 -moz- | 9.0 <br>4.0 -webkit- | 30.0 <br>15.0 -webkit- <br>12.0 -o- |
Definition and Usage
The animation-timing-function specifies how a CSS animation should progress over the duration of each cycle.
The speed curve defines the time it takes for an animation to transition from one set of CSS styles to another.
The speed curve is used to make the changes smoother.
| Default value: | ease |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.animationTimingFunction="linear" |
| --- | --- |
Syntax
The animation-timing-function uses a mathematical function, called a cubic Bezier curve, to describe the speed curve. You can use your own values or use one of the predefined values:
| Value | Description | Test | |
|---|---|---|---|
| linear | The animation has the same speed from start to end. | Test | |
| ease | Default. The animation starts slowly, accelerates in the middle, and slows down at the end. | Test | |
| ease-in | The animation starts slowly. | Test | |
| ease-out | The animation ends slowly. | Test | |
| ease-in-out | The animation starts and ends slowly. | Test | |
| steps(int,start | end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter is optional and indicates whether the animation should start at the beginning of each interval or at the end. | |
| cubic-bezier(n,n,n,n) | Defines a cubic-bezier function with your own values. Possible values are numeric values from 0 to 1. |
Tip: Try different values in the "Try it" feature below.
Online Example
Example
To better understand different timing function values, here are five different div elements with five different values set:
/* 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;}
Example
Same as the previous example, but defining the speed curve using 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);}
Related Articles
CSS3 Tutorial: CSS3 Animations