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

transitionを用いた行きと戻りの制御です。
返ってくるときはどうやって制御するんだっけ?と思ったので自分用まとめ。
対象物にカーソルを置いた場合、離した場合を想定します。
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;
}
終わりに
CSSのアニメーションで検索すると色々な例が出てきて見るだけでも面白いです。
まだ勉強段階ですが、達人が作るようなアニメーションも作成できるレベルまで是非行きたいですね。
全然関係ないですけど、これを書いているときトネガワを思い出しました。パワポ。
ディスカッション
コメント一覧
すごく参考になりました!
ありがとうございます。
実生活の方が忙しくほぼ1年越しの返信となってしまい大変申し訳ございませんでした…。