CSS3 animation-timing-function プロパティ
 完全な CSS3 リファレンス
例
Play an animation with the same speed from beginning to end:
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /*Safari and Chrome*/ |
Try it yourself »
|
ブラウザ・サポート
animation-timing-function property is not supported in any browsers.
Safari and Chrome support an alternative, the -webkit-animation-timing-function property.
定義と用法
animation-timing-function specifies the speed curve of the animation.
speed curve defines the TIME an animation uses to change
from one set of CSS styles to another.
speed curve is used to make the changes smoothly.
| デフォルト値: |
ease |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.animationTimingFunction="linear" |
構文
| animation-timing-function: value; |
animation-timing-function uses a mathematical function, called the Cubic
Bèzier
curve, to make the speed curve. You can use your own
values in this function, or use one of the pre-defined values:
| 値 |
説明 |
| linear |
The animation has the same speed from start to end |
| ease |
Default. The animation has a slow start, then fast, before it ends
slowly |
| ease-in |
The animation has a slow start |
| ease-out |
The animation has a slow end |
| ease-in-out |
The animation has both a slow start and a slow end |
| cubic-bezier(n,n,n,n) |
Define your own values in the cubic-bezier function
Possible values are numeric values from 0 to 1 |
チップ: Try the different values in the Try it Yourself section below.
 |
Try it Yourself |
例
To better understand the different timing function values;
Here are five different <div> elements with five different values:
#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;}
/* 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 yourself »
|
例
Same as the example above, but the speed curves are defined with the
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);}
/* 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 yourself »
|
関連ページ
CSS3 チュートリアル: CSS3 Animations
完全な CSS3 リファレンス
|