ゴーストボタンの背景を左から右へ受け流すアニメーション実装方法【ホバーアニメーション】

はる

ボタンをホバーすると左から右へ背景がアニメーションさせるCSSの方法を紹介します。
その応用方法も、紹介するので覚えておくとさまざまな場面で使えます。

今回は、CSSアニメーションで、左から右へと背景や線画流れるようなアニメーションの方法を紹介します。

デモ
1. 解説
応用編
まとめ

デモ

See the Pen 【ホバーアニメーション】ゴーストボタンの背景を左から右へ受け流す by blanket11 (@blanket11hal) on CodePen.

よくあるゴーストボタンに、
ホバーした時背景色が左から右に塗られていくアニメーションです。

ホバーが外れると、
背景色が、右に流れるように消えていくのが確認できるかと思います。

解説

.button {
  position: relative;
  display: inline-block;
  padding: 16px 64px;
  font-size: 1.3rem;
  text-decoration: none;
  color: #111;
  border: 1px solid #111;
  transition: color .25s ease;
  
  &:hover {
    color: #fff;

    &::before {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #111;
    transform: scaleX(0);
    transform-origin: right;
    transition: all .25s ease;
    transition-property: transform;
  }
}

ポイントとなるのが、

transform を scaleX(0) から scaleX(1) に変化させる
transform-origin を right と left をタイミングよく切り替える

この２つです。

transform: scaleX(x)

transform: scaleX(0)にすると横から押し潰されたような状態になります。
これを利用し、scaleX(0)からscaleX(1)にすることで伸びるようなアニメーションになります。

transform-origin: xxx

transform-origin は transform で変形させる軸を指定できるので、
hover時と外した時で軸を変更することで、左から右に伸縮するような表現をしています。

応用編

See the Pen 左から右に棒が動くアニメーション by blanket11 (@blanket11hal) on CodePen.

.button {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-size: 1.3rem;
  text-decoration: none;
  color: #111;
  transition: color .25s ease;
  
  &:hover {
    &::before {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #111;
    transform: scaleX(0);
    transform-origin: right;
    transition: all .25s ease;
    transition-property: transform;
  }
}

背景の塗りの大きさを変化させることでボーダーが流れる演出も簡単です！
この応用の形は少しCSSを変更するだけで実現しています。