【CSS】transitionを用いて行きと戻りを制御してアニメーションを作成する方法

2019年4月19日2022年10月21日

transitionを用いた行きと戻りの制御です。

返ってくるときはどうやって制御するんだっけ？と思ったので自分用まとめ。

対象物にカーソルを置いた場合、離した場合を想定します。

1. hoverのみにtransitionを適用すると、一瞬で戻る
2. なぜtransitionを加えると上手くいくのか
3. widthのみの指定を行った場合
4. 終わりに

hoverのみにtransitionを適用すると、一瞬で戻る

以下は、ボックスにカーソルを置くと右に伸びる例。

しかし、ボックス上からカーソルが離れると一瞬で元通りになってしまいます。

.transition_box1{
	width:100px;
	height:100px;
	background-color: #000;
}
.transition_box1:hover{
	transition: 0.5s;
	width:400px;
}

本当は伸びるときと同様に戻るときにもスーッと戻ってほしいのです。どうするか。

上記ソースコードの上の要素に「transition:0.5s;」を書き加えます。

実際に適用すると、以下のように行きも戻りもゆるやかになります。

.transition_box2{
	width:100px;
	height:100px;
	background-color: #000;
        transition:0.5s;
}
.transition_box2:hover{
	transition: 0.5s;
	width:400px;
}

transitionを書き加えると上手くいく理由を考えてみます。

なぜtransitionを加えると上手くいくのか

結論から申し上げますと、

「適用可能なプロパティ全て」に「変化に要する時間」を書き加えたから

です。

transitionは一括指定プロパティです。何を指定するかというと、

transitionを適用した際の「変化に要する時間」、「変化の適用対象」、「変化速度の割合」、「変化を開始するまでの時間」の4つです。

以上を踏まえた上での重要点は以下の2点です。

「変化に要する時間」を0.5秒で設定し、その他は初期値のまま
「変化の適用対象」の初期値は「適用可能なプロパティ全て」

すなわち、先ほどの処理では、

適用可能なプロパティである「width」、「height」に対し、「0.5秒」で100pxになるように指定した

というわけです。また、

適用可能なプロパティを「transition-property」

変化に要する時間に関するプロパティを「transition-duration」

と言います。

ちなみに、先ほどの例では「height」の高さは変化前、変化後と100pxで見た目上変わりません。

widthのみの指定を行った場合

以上を踏まえた上で、最後に適用可能なプロパティを「width」のみで設定してみます。

上の要素内に「transition:width 0.5s」と記述します。

なお、今回は高さも幅も変化させます。

「height」にはtransitionが適用されないので、カーソルを離すと一瞬で元に戻ります。

一方、「width」には適用されていますので、ゆるやかに戻ります。

.transition_box3{
	width:100px;
	height:100px;
	background-color: #000;
	transition:width 0.5s;
}
.transition_box3:hover{
	transition: 0.5s;
	width:400px;
	height:400px;
}