CSS3遷移タイミング機能プロパティ
例
最初から最後まで同じ速度でトランジション：
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
»をお試しください
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
属性の定義と指示
遷移タイミング機能プロパティは、トランジション効果の速度を指定します。
このプロパティは、その期間の速度を変更するトランジションエフェクトを可能にします。
| デフォルト： | 楽 |
|---|---|
| 継承： | いいえ |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | オブジェクト.style.transitionTimingFunction = "線形" |
文法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 値 | 説明 |
|---|---|
| リニア | トランジション効果を終了する（同じ立方ベジエ（0,0,1,1））を開始するために、同じ速度で規定。 |
| 楽 | プロビジョニングスロースタート、その後、より速く、より遅いトランジションエフェクトの終了（立方ベジエ（0.25,0.1,0.25,1））。 |
| 使いやすさで | （立方ベジエ（0.42,0,1,1）に等しい）スロースタートの効果に経過規定。 |
| 使いやすさ・アウト | 遅いトランジションエフェクトの終わり（等価立方ベジエ（0,0,0.58,1））に規定。 |
| 使いやすさでアウト | 実際には経過措置が遅い開始と終了（同じ立方ベジエ（0.42,0,0.58,1））。 |
| 立方ベジェ（N、N、N、N） | あなたは立方ベジエ機能に独自の値を定義します。 可能な値は0から1の間の数です。 |
ヒント：異なる値を試してみて 、それがどのように動作するかを理解するために、以下の例！
より多くの例
例
より良い異なる値の機能を理解するために：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;}
/* Safari */
#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;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#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;}
»をお試しください
例
そして、上記の例が、速度曲線立方ベジェ関数を指定：
#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);}
/* Safari */
#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);}
#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);}
/* Safari */
#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);}
»をお試しください