CSS3 animation-timing-function property
Examples
From start to finish at the same speed play the animation:
-webkit-animation-timing-function:linear; /* Safari and Chrome */
try it"
In the bottom of this page for more examples.
Browser Support
| 属性 | |||||
|---|---|---|---|---|---|
| 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 definitions and instructions
How animation-timing-function Specifies the animation will complete a cycle.
Speed curve definition movies from a CSS stylesheet into another set amount of time.
Speed curve is used to change smoother.
| Defaults: | ease |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object object.style.animationTimingFunction = "linear" |
grammar
Mathematical Functions animation-timing-function use, called the cubic Bezier curve, the speed curve. With this function, you can use your own values, or use one of the predefined values:
| value | description | test |
|---|---|---|
| linear | Animation from start to finish at the same speed. | test |
| ease | default. Anime began at low speed, then speed up, slow down at the end. | test |
| ease-in | Animation starts at low speed. | test |
| ease-out | Animation at low end. | test |
| ease-in-out | Animation start and end at low speed. | test |
| cubic-bezier (n, n,n, n) | Cubic-bezier function in your own values. The possible values are from 0-1 values. |
Tip: Try the following "try" function use a different value.
Online examples
Examples
To better understand the different timing function values, there is provided a set of five different values of five different div elements:
#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"
Examples
The same as the previous example, but is defined by the speed curve 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);}
/* 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"
related articles
CSS3 tutorial: CSS3 Animation