CSS3 transition-timing-function Property

例

最初から最後まで同じ速度でトランジション効果：

div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}

定義と使用法

遷移タイミング機能プロパティは、トランジションエフェクトの速度曲線を指定します。

このプロパティは、トランジション効果は、その期間にわたって速度を変更することができます。

デフォルト値：	ease
継承されました：	no
アニメーション：	no. Read about animatable
バージョン：	CSS3
JavaScriptシンタックス：	object .style.transitionTimingFunction="linear" Try it

ブラウザのサポート

表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。

-webkit-が続く数字、-moz-または接頭辞で働いていた最初のバージョンを指定して-O-です。

プロパティ
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -O-

CSSの構文

プロパティ値

値	説明
ease	デフォルト値。ゆっくり終了し、速いその後、スロースタートでトランジションエフェクトを指定します(equivalent to cubic-bezier(0.25,0.1,0.25,1) ）
linear	最初から最後まで同じ速度でトランジションエフェクトを指定します(equivalent to cubic-bezier(0,0,1,1)
ease-in	スロースタートとトランジションエフェクトを指定します（に相当cubic-bezier(0.42,0,1,1)
ease-out	遅い終了とトランジションエフェクトを指定します（に相当cubic-bezier(0,0,0.58,1)
ease-in-out	（に相当するスロースタートとエンドとトランジションエフェクトを指定cubic-bezier(0.42,0,0.58,1)
step-start	相当するsteps(1, start)
step-end	相当するsteps(1, end)
steps(int,start\|end)	2パラメータで、ステッピング機能を指定します。最初のパラメータは、関数内の間隔の数を指定します。これは、正の整数でなければなりません(greater than 0) 。、オプションである2番目のパラメータは、値のいずれかである"start"または"end" 、および値の変化が区間内で発生するポイントを指定します。二番目のパラメータが省略された場合には、値を指定された"end"
cubic-bezier( n , n , n , n )	立方ベジエ機能に独自の値を定義します。可能な値は0から1までの数値です
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

Tip:それはどのように動作するかを理解するために、以下の実施例に異なる値を試してみてください！

その他の例

例

より良い別の関数の値を理解するために：ここでは5異なる値を持つ5異なるdiv要素は以下のとおりです。

/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

»それを自分で試してみてください

例

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

/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Standard syntax */
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}