CSS3 animation-timing-function Property
Example
Play an animation with the same speed from beginning to end:
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
}
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The animation-timing-function specifies the speed curve of the animation.
The speed curve defines the TIME an animation uses to change from one set of CSS styles to another.
The speed curve is used to make the changes smoothly.
| Default value: | ease |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.animationTimingFunction="linear" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| animation-timing-function | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
CSS Syntax
The animation-timing-function uses a mathematical function, called the Cubic
Bezier
curve, to make the speed curve. You can use your own
values in this function, or use one of the pre-defined values:
Property Values
| Value | Description | Play it |
|---|---|---|
| linear | The animation has the same speed from start to end | Play it » |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly | Play it » |
| ease-in | The animation has a slow start | Play it » |
| ease-out | The animation has a slow end | Play it » |
| ease-in-out | The animation has both a slow start and a slow end | Play it » |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Tip: Try the different values in the Try it Yourself section below.
More Examples
Example
To better understand the different timing function values;
Here are five different <div> elements with five different values:
#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 curves are defined with the cubic-bezier function:
#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);}
/* Standard syntax */
#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 »
Related Pages
CSS3 tutorial: CSS3 Animations
HTML DOM reference: animationTimingFunction property
Your suggestion:
Thank You For Helping Us!
Your message has been sent to W3Schools.
