ボタンhover時のアニメーションで気になっていること

本題

タイトル通りではあるのですが大多数がどうでもいいと思うかもしれませんが見るたびに気になっていることについて書きます。

「細かいことが気になってしまう悪い癖」ってやつです。

:hover をトリガーにして transform でアニメーションさせるよくあるボタンだと思います。

何が気になるのかは下の gif をみてもらえればわかるかと・・・

といったことがループするのが気になる！！！ってことです。

特定の位置にマウスポインタがある場合のみ起こる事ではあるのですが気になりませんか？

僕は気になります。

buttonのなかにspan要素をいれて、buttonの:hover でspanをアニメーションさせます。

buttonは:hover を拾うためだけのダミーで本体はspanという状態ですね。

ですがbuttonの:hover だけだとアニメーション後のspanの位置(buttonの範囲外)にマウスポインタが行くと戻ってしまうので spanの:hover も定義しておかないといけません。

少々手間がかかりますが派手にボタンを動かすときなどでは有効な手法だと思います。

以上、細かいことが気になるはなしでした。