CSS
トランジション
サーチ…
構文
- 遷移：[遷移プロパティ] [遷移時間] [遷移タイミング関数] [遷移遅延];
パラメーター
| パラメータ | 詳細 |
|---|---|
| 移行特性 | すべての移行可能なプロパティを移行する必要がある場合は、値の変更が必要な特定のCSSプロパティをall （またはall ） 移行する必要があります。 |
| 移行期間 | 遷移が起こらなければならない期間（または期間）（ s ）またはミリ秒（ ms ）。 |
| 移行タイミング機能 | 遷移中の中間値の計算方法を記述する関数。一般的に使用される値は、 ease 、 ease-in 、 ease-out 、 ease-in-out 、 linear 、 cubic-bezier() steps()さまざまなタイミング関数の詳細については、 W3Cの仕様を参照してください 。 |
| 遷移遅延 | 移行が開始するまでに経過していなければならない時間。秒（で指定することができますs ）またはミリ秒（ ms ） |
備考
いくつかの古いブラウザは、 ベンダー接頭辞の transitionプロパティのみをサポートしています。
-
-webkit：Chrome 25-、Safari 6-、Safari＆Chrome for iOS 6.1-、Android 4.3-ブラウザ、Blackberry Browser 7-、UC Browser 9.9- Android用。 -
-moz：Firefox 15- -
-o：Opera 11.5-、Opera Mobile 12-。
例：
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
トランジションの短縮形
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
この例では、divが表示されたときに背景色が変更されます。背景色の変更は1秒間続きます。
トランジション（長さ）
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- transition-property ：トランジションエフェクトが適用されるCSSプロパティを指定します。この場合、divは水平移動と垂直移動の両方で展開されます。
- transition-duration ：遷移が完了するまでの時間を指定します。上記の例では、高さと幅の遷移にはそれぞれ1秒と500ミリ秒がかかります。
- transition-timing-function ：トランジション効果の速度カーブを指定します。 リニア値は、トランジションの開始から終了までのスピードが同じであることを示します。
- transition-delay ：トランジションエフェクトが開始するまでに待機する時間を指定します。この場合、高さはすぐに移行を開始しますが、幅は1秒間待機します。
立方体ベジェ
cubic-bezier関数は、カスタムおよびスムーズな遷移によく使用される遷移タイミング関数です。
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
関数は4つのパラメータをとります：
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
これらのパラメータは、 ベジエ曲線の一部である点にマップされます。
CSSベジエ曲線の場合、P0とP3は常に同じ場所にあります。 P0は（0,0）にあり、P3は（1,1）にあり、キュービックベジェ関数に渡されるパラメータは0と1の間にしかない。
この間隔にないパラメータを渡すと、関数はデフォルトでlinear遷移になります。
立方体ベジェはCSSで最も柔軟な遷移であるため、他のすべての遷移タイミング関数を3次ベジェ関数に変換することができます。
linear ： cubic-bezier(0,0,1,1)
cubic-bezier(0.42, 0.0, 1.0, 1.0) ease-in ： cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out ： cubic-bezier(0.0, 0.0, 0.58, 1.0)
cubic-bezier(0.42, 0.0, 0.58, 1.0) ease-in-out ： cubic-bezier(0.42, 0.0, 0.58, 1.0)