【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し | UNORTHODOX WORKBOOK | BlogCSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。 これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。 マウスアウト時の挙動 とりあえず、それぞれのマウスアウト時の挙動を確認します。
