【CSS】transitionでアニメーションを実現する方法

HTML/CSS

transitionについて

transitionとはプロパティの状態変化を定義するCSSプロパティで、transition-property、transition-duration、transition-timing-function、transition-delayを一括指定します。

transitionの基本構文はtransition: [対象プロパティ] [所用時間]です。
たとえばtransition: width 1sは「1秒かけてwidthプロパティを変更する」という意味になります。

transitionによるアニメーションはイージング関数で制御されており、デフォルトはease（開始から終了にかけて緩やかになる）です。
イージング関数を指定する場合の構文はtransition: [対象プロパティ] [所用時間] [イージング関数]となります。

また、transitionでは待ち時間（アニメーションが実行されるまでの遅延時間）も指定できます。
待ち時間を指定する場合の構文はtransition: [対象プロパティ] [所用時間] [待ち時間]、イージング関数を指定する場合はtransition: [対象プロパティ] [所用時間] [イージング関数] [待ち時間]となります。

以下はtransitionでwidthを変化させる例です。

<div class='item ease'>width 2s</div>
<hr>
<div class='item ease_delay'>width 2s 1s</div>
<hr>
<div class='item linear'>width 2s linear</div>
<hr>
<div class='item linear_delay'>width 2s linear 1s</div>


.item {
  width: 200px;
  height: 30px;
  background: lightskyblue;
}

.ease {
  transition: width 2s;
}

.ease_delay {
  transition: width 2s 1s;
}


.linear {
  transition: width 2s linear;
}

.linear_delay {
  transition: width 2s linear 1s;
}

.item:hover {
  width: 300px;
}

See the Pen
transition-width by Toshiharu Nishina (@nishina555)
on CodePen.

transitionとtransformを組み合わせた例

transformは要素の回転、拡大縮小、傾斜、移動を定義するCSSプロパティです。
transformとtransitionを組み合わせることで簡単にアニメーションが作成できます。

以下はtransformの回転(rotate)をtransitionでアニメーション化した例です。

<img class='icon' src="https://user-images.githubusercontent.com/3121046/185730604-c66b3bf0-0dc0-4309-bc55-17b33041175c.svg" />


.icon {
  width: 150px;
  height: 150px;
  transition: transform 1s;
}

.icon:hover {
  transform: rotate(-180deg);
}

See the Pen
transition-transform by Toshiharu Nishina (@nishina555)
on CodePen.

transitionで複数のプロパティを制御する例

transitionはカンマ区切りにすることでプロパティの状態変化を複数指定できます。
以下はtransformとopacityの状態変化をtransitionで指定した例です。

<img class='icon' src="https://user-images.githubusercontent.com/3121046/185730604-c66b3bf0-0dc0-4309-bc55-17b33041175c.svg" />


.icon {
  width: 150px;
  height: 150px;
  transition: transform 1s, opacity 1s;
}

.icon:hover {
  transform: rotate(-180deg);
  opacity: 0.25;
}

See the Pen
transition-multi-properties by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

RECOMMEND