CSStransition -timing-functionプロパティ

例

開始から終了まで同じ速度の遷移効果：

div {
transition-timing-function: linear;
}

定義と使用法

このtransition-timing-functionプロパティは、遷移効果の速度曲線を指定します。

このプロパティにより、トランジションエフェクトはその持続時間にわたって速度を変更できます。

デフォルト値：	簡易
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.transitionTimingFunction = "linear"

ブラウザのサポート

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

数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
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構文

プロパティ値

Value	Description
ease	Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear	Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in	Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out	Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out	Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
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 {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次ベジェ関数で指定されます。

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

CSSリファレンス

CSS Properties