トランジションをまとめて指定する

transition

{ transition 【 トランジション 】 : -property -duration -delay -timing-function; }

transitionプロパティは、トランジション関連のプロパティをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 各プロパティに準じる
適用される要素 すべての要素、:before、:after疑似要素
モジュール CSS Transitions

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。任意の順序で指定できますが、transition-duration、transition-delayプロパティは順序が決まっており、1つ目がtransition-durationプロパティ、2つ目がtransition-delayプロパティの値と見なされます。省略した場合は、各プロパティの初期値が適用されます。

サンプルコード

.box {
  border: 1px solid #ccc;
}
.box:hover {
  transition: border 5ms 1s ease-out;
  border-color: #f00;
}

上の例で指定したtransitionプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.box:hover {
  transition-property: border;
  transition-duration: 1s;
  transition-delay: 5ms;
  transition-timing-function: ease-out;
  border-color: #f00;
}

関連記事