トランジション - CSSリファレンス

#transition-delay

トランジションが開始するまでの待機時間を定義します。

デフォルト transition-delay: 0s;

トランジションは0秒待機し、すぐに開始します。

transition-delay: 1.2s;

キーワードsを使用して、秒で小数値を使用できます。

transition-delay: 2400ms;

キーワードmsを使用して、秒の代わりにミリ秒を使用できます。

transition-delay: -500ms;

負の値を使用できます。トランジションは、500ms間再生されていたかのように開始します。

#transition-duration

トランジションの持続時間を定義します。

デフォルト transition-duration: 0s;

トランジションは0秒続き、したがって瞬時です。

transition-duration: 1.2s;

キーワードsを使用して、秒で小数値を使用できます。

transition-duration: 2400ms;

キーワードmsを使用して、秒の代わりにミリ秒を使用できます。

#transition-property

どのプロパティがトランジションするかを定義します。

デフォルト transition-property: all;

要素はすべてのプロパティをトランジションします。

transition-property: none;

要素はどのプロパティもトランジションしません。したがって、トランジションは瞬時です。

transition-property: background;

要素はbackgroundプロパティのみトランジションします。

transition-property: color;

要素はcolorプロパティのみトランジションします。

transition-property: transform;

要素はtransformプロパティのみトランジションします。

#transition-timing-function

トランジションの開始と終了の間の値の計算方法を定義します。

デフォルト transition-timing-function: ease;

トランジションはゆっくりと始まり、中央で加速し、最後に減速します。

transition-timing-function: ease-in;

トランジションはゆっくりと始まり、徐々に最後まで加速します。

transition-timing-function: ease-out;

トランジションは速く始まり、徐々に最後まで減速します。

transition-timing-function: ease-in-out;

easeに似ていますが、より顕著です。

トランジションは速く始まり、徐々に最後まで減速します。

transition-timing-function: linear;

トランジションは一定の速度です。

transition-timing-function: step-start;

トランジションは最終状態に瞬時にジャンプします。

transition-timing-function: step-end;

トランジションは最後まで初期状態にとどまり、最後に最終状態に瞬時にジャンプします。

transition-timing-function: steps(4, end);

整数を使用してsteps()を使用すると、終了する前に特定のステップ数を定義できます。要素の状態は徐々に変化するのではなく、別々の瞬間に状態から状態へジャンプします。

#transition

transition-property transition-duration transition-timing-function および transition-delay の省略記法プロパティです。

transition-durationのみが必須です。

transition: 1s;

transition-durationが1sに設定されます。
transition-propertyはallにデフォルト設定されます。
transition-timing-functionはeaseにデフォルト設定されます。
transition-delayは0sにデフォルト設定されます。

transition: 1s linear;

transition-durationが1sに設定されます。
transition-propertyはallにデフォルト設定されます。
transition-timing-functionがlinearに設定されます。
transition-delayは0sにデフォルト設定されます。

transition: background 1s linear;

transition-durationが1sに設定されます。
transition-propertyがbackgroundに設定されます。
transition-timing-functionがlinearに設定されます。
transition-delayは0sにデフォルト設定されます。

transition: background 1s linear 500ms;

transition-durationが1sに設定されます。
transition-propertyがbackgroundに設定されます。
transition-timing-functionがlinearに設定されます。
transition-delayが500msに設定されます。

transition: background 4s, transform 1s;

独自のトランジション時間を持つ複数のプロパティを組み合わせることができます。