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

サイト構築 -CSS

Post on:2020年12月14日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

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

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

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

The State of CSS 2020

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

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;
}

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