transition で簡単なアニメーション効果

ここでは簡単にアニメーション効果を実現するこのができる transition について説明します。

"transition" というのは「遷移」とか「移り変わり」という意味です。

CSS では :hover とか :active などのタイミングで、 CSS プロパティを動的に切替えることができます。transition を使うと状態の切替えをスムーズに行うことでアニメーションの効果を実現します。

次の例では :hover で、要素の幅 (width) を変化させています。

.test1 {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #00C853;
}

.test1:hover {
	width: 100%;
}

ここで width にトランジションを設定することによって、次のようなアニメーション効果が実現できます。

.test1 {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #00C853;

	transition-property: width;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0.3s;
}

transition-property で transition を設定する CSS プロパティを指定します。

transition-duration は transition を開始してから完了するまでの時間を秒 s やミリ秒 ms で指定します。

transition-timing-function は状態の遷移の仕方を指定できます。すっと速くなってゆっくり止まる、とか、ゆっくり変化し始めて速くなるとかです。 このプロパティは ease、ease-in などの決まった値とか、関数値をとります。

代表的な transition-timing-function は次のようになります。

div.test2 {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #00C853;
	
	transition-property: width;
	transition-duration: 1s;
}

div.container:hover div.test2 {
	width: 100%;
}

<div class="container">

<div>ease</div>
<div class="test2"  style="transition-timing-function:ease;"></div>

<div>ease-in</div>
<div class="test2" style="transition-timing-function:ease-in;"></div>

<div>ease-out</div>
<div class="test2" style="transition-timing-function:ease-out;"></div>

<div>ease-in-out</div>
<div class="test2" style="transition-timing-function:ease-in-out;"></div>

<div>linear</div>
<div class="test2" style="transition-timing-function:linear;"></div>

</div>

transition-delay プロパティは、遷移の開始タイミングの遅れを指定できます。

省略形の書き方 transition

なお、上記の CSS プロパティはまとめて transition プロパティでまとめて指定できます。

つまり、

	transition-property: width;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0.3s;

は次と同じ意味になります。

	transition: width 1s ease 0.3s; 

これだけのことで、次のようなちょっとした遊び心のある効果を実現できます。

最後にひとこと・・・

こうしたアニメーションはあまり使いすぎると子供じみた感じになってみっともなくみえる場合も少なくないので、使いすぎには注意したほうがいいです。

ただ、そうはいってもやっぱり、適切なアニメーションを上手に使うことで使い勝手を大きく向上させる可能性がありますので、持ちネタとして知っておくべきでしょう。