開始から終了まで同じ速度でのトランジション効果：
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
Try it Yourself ❯
transition-timing-function プロパティは、トランジション効果の速度曲線を指定します。
このプロパティは、変化が行われている時間内に、トランジション効果の速度を変更することができます。
| デフォルト値： | ease |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。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- |
transition-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;
| 値 | 説明 |
|---|---|
| ease | デフォルト値。ゆっくり始まり、次に速く、ゆっくり終るトランジション効果を指定します (cubic-bezier(0.25,0.1,0.25,1) に同じ) |
| linear | 開始から終了まで同じ速度のトランジション効果を指定します（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 つのパラメータを持つ steps 関数を指定します。最初のパラメータは、何段階で変化するかを「1」以上の正の整数で指定します。 2 番目のパラメータはオプションで、"start" または "end" のいずれかを指定します。 start を指定すると始点（開始時）に最初のステップが発生し、end を指定すると終点（完了時）に最後のステップが発生します。 2 番目のパラメータが省略された場合、"end" を指定したものとみなされます |
| cubic-bezier(n,n,n,n) | 3 次ベジェ曲線に独自の値を定義します。指定できる値は、0 ～ 1 までの数値です |
| initial | プロパティにデフォルト値を設定します。initial を参照 |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
チップ: Try the different values in the examples below to understand how it works!
より深くいろいろな関数値を理解するために： ここに、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;}
Try it Yourself ❯
上の例と同じですが、速度曲線は、3 次ベジェ曲線を指定しています：
/* 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);}
Try it Yourself ❯
CSS チュートリアル： CSS3 Transitions
HTML DOM リファレンス：transitionTimingFunction プロパティ