CSS transition-timing-function 属性

定義と使用方法

transition-timing-function属性は、トランジション効果の速度曲線を定義します。

この属性は、トランジション効果が時間とともに速度を変化することを許可します。

他にも参照してください：

CSSチュートリアル：CSS 过渡

HTML DOMリファレンスマニュアル：transitionTimingFunction属性

インスタンス

例1

始めから終わりまで同じ速度のトランジション効果：

div
{
transition-timing-function: linear;
}

自分で試してみてください

CSS文法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

属性値

値 説明
linear 同じ速度で始まり、終わりに至るトランジション効果を定義します（cubic-bezier(0,0,1,1)と同等）。
ease 遅い速度で始まり、その後速くなり、最後に遅くなるトランジション効果を定義します（cubic-bezier(0.25,0.1,0.25,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)と同等）。
cubic-bezier(n,n,n,n) cubic-bezier関数で自分自身の値を定義します。可能な値は0から1の間の数値です。

ヒント：例の中で異なる値をテストして、それらの動作原理をよりよく理解してください。

技術的詳細

デフォルト値： ease
継承性： いいえ
バージョン： CSS3
JavaScript文法： オブジェクト.style.transitionTimingFunction="linear"

さらに多くの例

例2

異なる関数値をよりよく理解するために、以下の5つの異なる値を持つ5つの異なるdiv要素を見てください：

#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;}

自分で試してみてください

例3

上の例と同じですが、cubic-bezierで速度曲線を指定しています：

#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);}

自分で試してみてください

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

数字に-webkit-、-moz-、または-o-が付いているのは、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-