CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト

先日、当ブログで紹介したThe State of CSS 2020(紹介記事)に使用されているホバーエフェクトが話題になっていたので、紹介します。

テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。
ラインが一方向にスーッと通り過ぎるような感じです。

デモのアニメーション

The State of CSS 2020では、サイドバーのナビゲーションに使用されています。
こちらは下線が一方向にアニメーションします。

サイトのキャプチャ

The State of CSS 2020

仕組みは疑似要素を使用して、ホバーしていない時はtransform-originを右下に、ホバーした時はtransform-originを左下にします。
アニメーションの起点を変更することで、面白いエフェクトになっています。

実際の動作は、下記ページでご覧ください。

See the Pen
CSS mouse-out transition effect
by Adam Argyle (@argyleink)
on CodePen.

元ツイートは、下記です。

sponsors

top of page

©2021 coliss