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

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。 ラインが一方向にスーッと通り過ぎるような感じです。

[coliss]

transform-originプロパティを使用した実装テクニック。

[yoshi-na]

これは使いたいテクニックだわ

[arapro]

JS必須かと思ってたけど、こういうやり方あったのかー

[nicht-sein]

へぇーおもしろー

[nunota]

かわいい

[AyeBee_TY]

頼むから余計なことをしないでくれ。デザイナーの自己満足で普通と違う動きや無駄に凝ったアニメーションされると操作性が下がる。セオリーに従ってほしい。

[kawaosa]

ホバーでラインを引き外すと行き過ぎる