transitionは要素の状態の変化を指定する為のプロパティです。

要素の状態の変化は、ホバーなどの擬似クラスや transform プロパティによる変化の事を言います。

transitionの動き

transitionプロパティを使用し、簡単なtransitionプロパティの動作を確認します。

transitionを使用しない場合

HTML

<div class='test-box-01'></div>

CSS

.test-box-01 {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.test-box-01:active {
  background-color: red;
}

結果

要素を押下すると色が変わります。

transitionを使用する場合

HTML

同じなので割愛します。

CSS

.test-box-01 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  transition: background-color 1s ease; 
}

.test-box-01:active {
  background-color: red;
}

要素を押下し続けると要素の色が1秒変化するのが分かります。

結果

transitionの指定可能なプロパティ

transitiongが指定できるプロパティは以下の通りです。

transition-property
transition-duration
transition-delay
transition-timing-function

transition-property

transition-propertyプロパティは、transition効果を適用したいCSSプロパティを指定します。
今回の例ではtransition-propertyプロパティに background-color を指定しました。
なお、transition-propertyプロパティの値に all を指定すると全てのプロパティがtransition効果の対象となります。

transition-duration

transition-durationプロパティは、プロパティの変化が完了するまでの時間を指定します。
指定できる単位は s(秒) や ms(ミリ秒) です。
今回の例では1秒で変化するように指定しました。

transition-delay

transition-delayプロパティは、Transitionが始まるまでの遅延時間を設定します。指定できる単位は s(秒) や ms(ミリ秒) です。
今回の例はtransition-delayプロパティを指定していません。

transition-timing-function

transition-timing-functionプロパティは、状態の変化の進行速度を指定します。
指定できる代表的な値は以下の通りです。

linear
ease
ease-in
ease-out
ease-in-out

注意点

予想外の戻り

要素を押下すると右に伸びる要素を作成します。

HTML

<div class='test-box-01 linear'></div>

CSS

.test-box-01 {
  width: 60px;
  height: 30px;
  background-color: aqua;
  margin-left: 150px;
}

.test-box-01:active {
  transform-origin: top left;
  transform: scaleX(5);
}

.linear {
  transition: transform 2s linear;
}

結果

要素が戻る時に伸びた分が戻るような動きになりませんでした。

解決策

元の要素にもtransitionプロパティを設定します。

HTML

同じなので割愛します。

CSS

.test-box-01 {
  width: 60px;
  height: 30px;
  background-color: aqua;
  margin-left: 150px;
  transform-origin: top left;
}

.test-box-01:active {
  transform-origin: top left;
  transform: scaleX(5);
}

.linear {
  transition: transform 2s linear;
}

結果

transition-timing-functionnの違い

transition-timing-functionの値がどのように違うか確認してみます。

HTML

<div class='test-box-01 linear'>linear</div>
<div class='test-box-01 ease'>ease</div>
<div class='test-box-01 ease-in'>ease-in</div>
<div class='test-box-01 ease-out'>ease-out</div>
<div class='test-box-01 ease-in-out'>ease-in-out</div>

CSS

.test-box-01 {
  width: 130px;
  height: 30px;
  background-color: aqua;
  margin-left: 10px;
  margin-bottom: 10px;
  transform-origin: top left;
}

.test-box-01:active {
  transform-origin: top left;
  transform: scaleX(5);
}

.linear {
  transition: transform 2s linear;
}

.ease {
  transition: transform 2s ease;
}

.ease-in {
  transition: transform 2s ease-in;
}

.ease-out {
  transition: transform 2s ease-out;
}

.ease-in-out {
  transition: transform 2s ease-in-out;
}

結果

linear

ease

ease-in

ease-out

ease-in-out

最後に

特にありません。