CSSanimation -timing-functionプロパティ
例
最初から最後まで同じ速度でアニメーションを再生します。
div {
animation-timing-function: linear;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
animation-timing-function
は、アニメーションの速度曲線を指定します。
速度曲線は、アニメーションがCSSスタイルのセットから別のセットに変更するために使用する時間を定義します。
速度曲線は、変更をスムーズに行うために使用されます。
デフォルト値: | 簡易 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.animationTimingFunction = "linear" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
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- |
CSS構文
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
アニメーションタイミング関数は、キュービックベジェ曲線と呼ばれる数学関数を使用して速度曲線を作成します。この関数で独自の値を使用することも、事前定義された値の1つを使用することもできます。
プロパティ値
Value | Description | Play it |
---|---|---|
linear | The animation has the same speed from start to end | |
ease | Default value. 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 | |
step-start | Equivalent to steps(1, start) | |
step-end | Equivalent to steps(1, end) | |
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, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "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 |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ヒント:以下の「その他の例」セクションでさまざまな値を試してください。
その他の例
例
さまざまなタイミング関数値をよりよく理解するため。
5つの異なる値を持つ5つの異なる<div>要素を次に示します。
#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;}
例
上記の例と同じですが、速度曲線は3次ベジェ関数で定義されます。
#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);}
関連ページ
CSSチュートリアル:CSSアニメーション
HTML DOMリファレンス:animationTimingFunctionプロパティ