【CSS】マウスオーバーで疑似要素がスライドインするアニメーション

こんにちは、Ryohei（@ityryohei）です！

マウスオーバーで疑似要素がスライドインするCSSアニメーションのご紹介です。

要素にマウスカーソルを乗せると、単色やグラデーションといった重なり要素がスライドインで表示されるアニメーションになります。下記にデモをご用意しましたので「Hover Me!」と表示された要素にマウスカーソルを乗せて、実際の動きをご確認ください。

See the Pen
Hover Animation8 | CSS by ryoy (@intotheprogram)
on CodePen.

いかがでしょうか。

「Hover Me!」と表示された要素にマウスカーソルを乗せると、単色の白い要素が左から右に向かってスライドインで表示されたかと思います。

スライドイン部分は疑似要素で実現しているため、classやidを指定すれば新しいタグを記述する必要がないため、汎用性が高く、また疑似要素で実現しているので画像やグラデーションのようなものも簡単に取り入れることができるのもおすすめな部分です。

本記事では、疑似要素を使ったスライドインアニメーションの実装方法を詳しくご紹介したいと思います。

では、解説していきます。

HTMLで要素を作成する

HTMLで要素を作成していきます。

スライドインしてくる部分は疑似要素で実現するため、HTMLを作成する段階で特に気にする必要はありません。ただ、疑似要素は背景とコンテンツの間にスライドインすることになりますので、重なり順は意識しておくとよいかもしれません。

具体的な重なり順は下記のようになります。z-indexは仮の値になりますが、順番の参考にしていただければと思います。

• 要素(z-index: 1)
• 疑似要素(z-index: 2)
• コンテンツ(z-index: 3)

下記はデモのHTMLです。上記の重なり順でお話しすると、コンテンツ(z-index: 3)がspanタグの内容になります。

HTML

<button>
  <span>Hover Me!</span>
</button>

スタイルを定義する

続いて、前項で作成したHTMLの要素にスタイルを定義していきます。

スライドインするアニメーションはtransitionとtransformのtranslate3dで実現しています。translateXやtranslateYでも問題ないので、使いやすいtransformの関数をご利用ください。

transitionには、cubic-bezierで動きを付けることができます。下記ジェネレーターで動きを見ながら値を作成できますので、好きな動きを付けましょう。

cubic-bezier.com

後は、下記でご紹介しているCSSを参考にしていただき、ご自身のサイトにあったスタイルを定義していただければと思います。

CSS

button {
  position: relative;
  display: block;
  width: 300px;
  height: 70px;
  margin: 40px auto 0;
  color: #fff;
  font-size: 1.5em;
  background: #007db9;
  overflow: hidden;
}

button span {
  position: relative;
  z-index: 1;
  transition: .3s;
}

button:hover span {
  color: #007db9;
}

/* 疑似要素 */
button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: translate3d(-100%, 0, 0);
  transition: .3s;
}

/* 疑似要素(hover) */
button:hover:before {
  transform: translate3d(0, 0, 0);
}

最後に

本記事ではボタンを使って疑似要素がスライドインするアニメーションをご紹介してきました。

ボタン以外にも応用がきくアニメーションになりますので、これから制作される多くのサイトでご活用いただければ幸いです。

以上、マウスオーバーで疑似要素がスライドインするCSSアニメーションのご紹介でした！