[CSS]マウスホバーでじわーっと変化して、じわーっと元に戻す方法

マウスを乗せた時に何かしらの変化をすることは:hoverで実装できます。

ただ、hover側だけで実装しても不自然な効果になってしまう場合があります。

今回はマウスホバーをした時、した後の変化を自然にする方法を紹介します。

マウスホバーの悩み

例えば、マウスホバーをした時にじわっと要素が移動し、マウスを外すとじわっと要素が元に戻るものを実装したいとします。

まず、マウスホバー時に何らかの変化を付けるには:hoverで指定しますね。

次に、その変化の遷移を時間指定するのはtransition: transform 2sで実装できますね。

グレーのボックスの上にマウスを乗せるとボックスが上にじわっと動きますよね。
でも、マウスを離すとボックスがぱっと元の位置に戻ってしまいます。
ホバー時とマウスを外した時の要素の動きに差があり違和感を感じます。
これを、マウスを外した時も同じスピードで戻るようにしたいと思います。

解決策

transition: all 2s;を書くだけでこの問題は解決できます。(hover側ではないのに注意！)

実際にマウスをボックスに乗せたり外したりしてみてください。マウスが外れた時の要素の戻りが同じ時間をかけてじわっと戻っていくのが分かると思います。

allを記述することで、その要素のhoverやactiveなどの時にも同じ動きの変化を反映させることができます。

今回は要素の移動をサンプルにしましたが、マウスホバーで色が変わるやつでも他の変化で応用できます。