移ろいゆくアニメーションを表現するCSS「transition」について解説

transitionを日本語訳すると、

  • 移り変わり
  • 移行
  • 変遷
  • 変化

といった意味になります。
まさにアニメーションに関するプロパティですね。少し難しく表現すると「時間的変化」を表現するものです。

マテリアルの表現はtransitionを理解せずには実現できません。マテリアルデザインの鍵を握るtransitionについて解説していきます。

W3Cの公式ドキュメントはこちらです。
https://drafts.csswg.org/css-transitions/

はにわまん
transitionで簡単なアニメーションを実現しましょう!

内包している4つのプロパティの役割

backgroundborderなどのプロパティと似ていて、transitionも4つプロパティを一括で指定できるCSSです。まとめて表現できるプロパティをショートハンドプロパティを呼ばれたりします。

指定する順番に紹介すると、

  • transition-property -> アニメーションさせるプロパティを指定
  • transition-duration -> 時間(アニメーションが動いている間)
  • transition-timing-function -> タイミング
  • transition-delay -> 時間(アニメーションが開始するまでの間)

の4つのプロパティを指定できます。

初期値は以下のとおり。

  • transition-property: none;
  • transition-duration: 0s
  • transition-timing-function: ease;
  • transition-delay: 0s;

これをまとめて表現すると、

transition: none 0s ease 0s;

という書き方になるわけです。

それぞの要素を個別に深掘りしていきます。

transition-property

アニメーションの効果を表現するプロパティです。

説明
all 変化を適用できるプロパティすべてが変化する(初期値)
none どのプロパティも変化しない
プロパティ名 変化させるプロパティ名のリストをカンマ( , )区切りで指定

実例を見ていきましょう。

allを指定した場合

変化対象となる、backgroundwidthheightのすべてにアニメーションが適応されているのが分かります。

※ マウスホバー or タップ

<div class="transition-property-all"></div>
.transition-property-all {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0s;
}
.transition-property-all:hover {
	width: 200px;
	height: 200px;
	background: #009688;
}

widthだけを指定した場合

指定外のbackgroundheightは直ぐに切り替わり、widthだけにアニメーションが適応されているのが分かります。

※ マウスホバー or タップ

<div class="transition-property-width"></div>
.transition-property-width {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transition-property: width; // 複数指定する場合は width, height などカンマ区切り
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0s;
}
.transition-property-width:hover {
	width: 200px;
	height: 200px;
	background: #009688;
}

transition-duration

アニメーションが開始してから終わるまでの時間を指定できるプロパティです。

説明
xs x秒
xms xミリ秒(1000ミリ秒 = 1秒)

実例を見ていきましょう。

1sを指定した場合

変化が開始してから終わるまでの時間が1秒となります。

※ マウスホバー or タップ

<div class="transition-duration-1s"></div>
.transition-duration-1s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0s;
}
.transition-duration-1s:hover {
	width: 200px;
	height: 200px;
	background: #009688;
}

5sを指定した場合

変化が開始してから終わるまでが5秒となります。

※ マウスホバー or タップ

<div class="transition-duration-5s"></div>
.transition-duration-5s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transition-property: all;
	transition-duration: 5s;
	transition-timing-function: ease;
	transition-delay: 0s;
}
.transition-duration-5s:hover {
	width: 200px;
	height: 200px;
	background: #009688;
}

transition-timing-function

変化の表現を指定するプロパティです。

一定のスピード、最初を早く段々遅く、などを指定できます。

説明
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) を指定したのと同じ)
cubic-bezier(数値, 数値, 数値, 数値) 3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

各値の違いを見てみよう

easelinearease-inease-outease-in-outの各値を並べてみました。

開始から終了までのアニメーション時間は同じですが、動きがそれぞれ異なることが分かります。

アニメーションを確認する
ease
linear
ease-in
ease-out
ease-in-out

transition-delay

アニメーションが始まるまでの時間を指定できるプロパティです。

説明
xs x秒
xms xミリ秒(1000ミリ秒 = 1秒)

1sを指定した場合

アニメーション開始までに1秒かかっていることが分かります。

※ マウスホバー or タップ

<div class="transition-delay-1s"></div>
.transition-delay-1s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 1s;
}
.transition-delay-1s:hover {
	width: 200px;
	height: 200px;
	background: #009688;
}

3sを指定した場合

アニメーション開始までに3秒かかっていることが分かります。

※ マウスホバー or タップ

<div class="transition-delay-3s"></div>
.transition-delay-3s {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 3s;
}
.transition-delay-3s:hover {
	width: 200px;
	height: 200px;
	background: #009688;
}

transitionでまとめて記載する

transition-propertytransition-durationtransition-timing-functiontransition-delayはまとめて書くことができます。

記載順番は、

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]

という並びになります。

実例としては以下のような感じです。

※ マウスホバー or タップ

<div class="transition"></div>
.transition {
	width: 100px;
	height: 100px;
	background: #00BCD4;
	transition: all 1s ease 0s;
}
.transition:hover {
	width: 200px;
	height: 200px;
	background: #009688;
}

ずいぶんとスッキリしますね。

おわり


transitionプロパティについて解説しました。
1つ1つのプロパティの意味を見つつ、実際に動きを確認していくとすぐに覚えられると思います!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事