【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し | UNORTHODOX WORKBOOK | Blog

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

[daizo1117]

“対象の要素が見える位置でリロードしてみるとよく分かるんですが、ページが表示されるタイミングで、巻き戻し用のアニメーションが実行されてしまいます。これを防ぐことは（多分）できないんですが、durationの長さ