CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト
Post on:2020年12月14日
sponsors
先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。
テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。
ラインが一方向にスーッと通り過ぎるような感じです。
The State of CSS 2020では、サイドバーのナビゲーションに使用されています。
こちらは下線が一方向にアニメーションします。
仕組みは疑似要素を使用して、ホバーしていない時はtransform-originを右下に、ホバーした時はtransform-originを左下にします。
アニメーションの起点を変更することで、面白いエフェクトになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
h1::before { transform: scaleX(0); transform-origin: bottom right; } h1:hover::before { transform: scaleX(1); transform-origin: bottom left; } h1::before { content: " "; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0 0 0 0; background: hsl(200 100% 80%); z-index: -1; transition: transform .3s ease; } |
実際の動作は、下記ページでご覧ください。
See the Pen
CSS mouse-out transition effect by Adam Argyle (@argyleink)
on CodePen.
元ツイートは、下記です。
When not hovered, the origin of the scale is the bottom right corner
When hovered, the origin is the bottom left
that's the trick!https://t.co/W6HsYjHYuS pic.twitter.com/466I4R0cQ7
— Adam Argyle (@argyleink) December 1, 2020
sponsors
