【CSS】マウスオーバーで分散しているテキストが集まるアニメーション

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

マウスオーバーで分散しているテキストが集まるアニメーションのご紹介です。

多方向に分散しているテキストがマウスオーバーで元の位置に戻るアニメーションです。具体的には下記デモのようなイメージになります。「Hover Me!」と表示されている要素にマウスのカーソルを乗せてみてください。

See the Pen
PvLpLQ by ryoy (@intotheprogram)
on CodePen.

マウスのカーソルを乗せると「Hover Me!」というテキストが消えて「「Awsome!!」というテキストが表示されたかと思います。

上記のデモではテキストの親要素に「overflow: hidden」を設定しているため、テキストが分散している状態がわかりにくくなっています。「overflow: hidden」を外すと下記のようになっています。

See the Pen
hover Animation03-1 | CSS by ryoy (@intotheprogram)
on CodePen.

こちらをご覧いただくと、分散しているテキストが集まるという動きが掴みやすいかと思います。

本記事では上でご紹介した分散しているテキストが集まるアニメーションの実装方法を詳しくご紹介したいと思います。

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

HTMLを作成する

まずはHTMLを作成します。本記事では分散させるテキスト一文字一文字にそれぞれ異なるスタイルを定義しています。そのため一文字ずつタグで囲む必要があります。

下記はHTMLのサンプルになります。サンプルでは一文字ずつspanタグで囲っていますが、実際に使用される場合はお好きなタグをご使用ください。

HTML

<button class="box">
  <span>A</span>
  <span>w</span>
  <span>s</span>
  <span>o</span>
  <span>m</span>
  <span>e</span>
  <span>!!</span>
</button>

以上でHTMLの作成は完了です。続いてスタイルを定義していきます。

スタイルを定義する

マークアップしたHTMLにスタイルを定義します。下記のポイントを押さえてCSSを記述していきます。

テキストの親要素に「overflow: hidden」を設定する
テキストは一文字ずつ「transform: translate()」で位置を分散させる
疑似クラスの「hover」でマウスオーバー時にテキストが元の位置に戻るようにする

下記はCSSのサンプルになります。デモで使用しているものになりますので、疑似要素等の不要なスタイルをありますので適宜削除いただければと思います。

CSS

.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 50px;
  margin: 80px auto 0;
  text-align: center;
  background: #007db9;
  overflow: hidden;
}

.box span {
  display: block;
  color: #fff;
  transition: .3s;
  font-size: 1.5em;
}

/* A */
.box span:nth-child(1) {
  transform: translate3d(-250px, -100px, 0);
}
/* W */
.box span:nth-child(2) {
  transform: translate3d(-125px, 100px, 0);
}
/* S */
.box span:nth-child(3) {
  transform: translate3d(-75px, -100px, 0);
}
/* O */
.box span:nth-child(4) {
  transform: translate3d(0, 100px, 0);
}
/* M */
.box span:nth-child(5) {
  transform: translate3d(75px, -100px, 0);
}
/* E */
.box span:nth-child(6) {
  transform: translate3d(125px, 100px, 0); 
}
/* !! */
.box span:nth-child(7) {
  transform: translate3d(250px, -100px, 0);
}

.box:before {
  content: 'Hover Me!';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  text-align: center;
  color: #fff;
  font-size: 1.5em;
  transform: translate(-50%, -50%);
  transition: .3s;
  opacity: 1;
}

/* Hover Animation */
.box:hover span {
  transform: translate3d(0, 0, 0) rotate(0);
}

.box:hover:before {
  opacity: 0;
}