CSS3アニメーションタイミング関数のプロパティ

例

最初から最後まで同じ速度でアニメーションを再生します：

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

»をお試しください
より多くの例については、このページの下で。

ブラウザのサポート

属性
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スタイルシートからの速度曲線精細映画。

速度曲線を滑らかに変化させるために使用されます。

デフォルト：	楽
継承：	いいえ
バージョン：	CSS3
JavaScriptシンタックス：	オブジェクトobject.style.animationTimingFunction = "線形"

文法

animation-timing-function:value;

数学関数アニメーションタイミング機能の使用、次ベジェ曲線、速度曲線と呼ばれます。この機能では、独自の値を使用するか、または定義済みの値のいずれかを使用できます。

値	説明	テスト
リニア	同じ速度で最初から最後までアニメーション。	テスト
楽	デフォルト。アニメは低速で、その後、スピードアップ終了時に遅く始まりました。	テスト
使いやすさで	アニメーションは、低速で開始します。	テスト
使いやすさ・アウト	アニメ低速終了。	テスト
使いやすさでアウト	低速でアニメーションの開始と終了。	テスト
立方ベジェ（N、N、N、N）	独自の値で立方ベジエ関数で。可能な値は0から1の値からです。

ヒント：以下の「してみてください」機能が異なる値を使用してみてください。

オンラインの例

例

より良好な異なるタイミング関数の値を理解するために、5の異なるdiv要素5つの異なる値のセットが提供されます。

/* W3C and Opera: */
#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;}

»をお試しください

例

前の例と同じですが、速度曲線立方ベジェ関数で定義されています。

/* W3C and Opera: */
#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);}

»をお試しください

CSS3のチュートリアル： CSS3アニメーション

前：CSS3アニメーション-durationプロパティ

次へ：CSS3アニメーション-遅延特性

CSS リファレンスマニュアル

CSS プロパティ

CSS3アニメーションタイミング関数のプロパティ

例

ブラウザのサポート

タグの定義と指示

文法

オンラインの例

例

例

関連記事