【CSS】Transitionプロパティについて

Transitionプロパティ

詳しくはMDNを参照してください。
transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay、 transition-behavior の一括指定プロパティです。
では各プロパティについてみていきましょう。

各プロパティについて

transition-property

transition-property は CSS のプロパティで、トランジション効果を適用する CSS プロパティを指定します。

/* キーワード値
 * none: どのプロパティもトランジションを行いません。
 * all: トランジションが可能なすべてのプロパティで、トランジションを行います。
 *
 * <custom-ident> 値
 * 値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。
 */

transition-property: none;
transition-property: all;
transition-property: test_05;

transition-duration

transition-duration は CSS のプロパティで、トランジションによるアニメーションが完了するまでの再生時間を秒数またはミリ秒数で指定します。既定値は 0s であり、これはアニメーションを実行しないことを示します。

/* <time> 値 */
transition-duration: 6s;
transition-duration: 120ms;

transition-timing-function

transition-timing-function は CSS のプロパティで、トランジション効果の影響を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。

/* キーワード値 */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;

ease
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同等であり、既定値です。トランジションの半ばまで変化量が増加し、最後にはまた遅くなります。
linear
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同等であり、トランジションは均等の速度になります。
ease-in
cubic-bezier(0.42, 0, 1.0, 1.0) と同等であり、最初は遅く、トランジションの速度は完了まで増加し続けます。
ease-out
cubic-bezier(0, 0, 0.58, 1.0) と同等であり、トランジションは速い速度で始まり、速度を次第に遅くしていきます。
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1.0) と同等であり、トランジションをゆっくり開始し、速度を上げた後、再び速度を遅くします。

transition-delay

CSS の transition-delay プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。

/* <time> 値 */
transition-delay: 3s;

待ち時間はゼロ、正の数、負の数で指定します。
0s (または 0ms) の値は直ちにトランジション効果が始まります。
正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。
負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。

transition-behavior

transition-behavior は CSS のプロパティで、プロパティは、アニメーションの動作が離散であるプロパティにトランジションを始めるかどうかを指定します。

/* キーワード値 */
transition-behavior: allow-discrete;
transition-behavior: normal;

allow-discrete
この要素では、離散アニメーションプロパティのトランジションが開始されます。
normal
この要素では、離散アニメーションプロパティのトランジションが開始されません。

構文

/* 1 つのプロパティへの適用 */
/* プロパティ名 | 再生時間 */
transition: margin-right 4s;

/* プロパティ名 | 再生時間 | 待ち時間 */
transition: margin-right 4s 1s;

/* プロパティ名 | 再生時間 | イージング関数 */
transition: margin-right 4s ease-in-out;

/* プロパティ名 | 再生時間 | イージング関数 | 待ち時間 */
transition: margin-right 4s ease-in-out 1s;

/* プロパティ名 | 再生時間 | 振る舞い */
transition: display 4s allow-discrete;

/* 2 つのプロパティへの適用 */
transition:
  margin-right 4s,
  color 1s;

/* 変化するすべてのプロパティへの適用 */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

e.g.

transition-propertyで変化するプロパティを、transition-durationでアニメーションが完了するまでの時間、transition-timing-functionで中間状態の値を算出する方法、transition-delayでトランジション効果が始まるまでの待ち時間を指定しています。
下記の例ではトランジションの初期値としてbackground-colorとcolorを設定しています。