【CSS】マウスオーバーでテキストがウェーブするアニメーション

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

マウスオーバーでテキストがウェーブするCSSのアニメーションのご紹介です。

リンクやボタン、テキストにマウスカーソルを乗せると、要素が持っているテキストが一文字ずつ跳ねるように動くアニメーションです。下記にデモを用意しましたので、「WAVE」と表示されたテキストにマウスカーソルを乗せてみてください。

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

「WAVE」が一文字ずつ上方向に動き、しばらくすると元の位置に戻ります。設置場所を選ばないシンプルなアニメーションのため、ヘッダーやフッター、サイドバーのリンク等でも使用することができます。

本記事では上記アニメーションの実装方法を詳しくご紹介したいと思います。

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

テキストを一文字ずつに分割してHTMLを作成する

まずはHTMLを作成します。本記事でご紹介するアニメーションは一文字ずつにスタイルを定義する必要がありますので、spanタグでテキストを一文字ずつに分割してマークアップします。

下記のようなHTMLになります。

HTML

<div class="wave">
  <span>W</span>
  <span>A</span>
  <span>V</span>
  <span>E</span>
</div>

サンプルでは「WAVE」という文字を一文字ずつに分割しています。spanタグを使用していますが、他のタグを使用していただいても問題ありません。お好みのタグを使用しましょう。

一文字ずつ囲ったタグにスタイルを定義する

続いて前項で用意したHTMLにスタイルを定義していきます。アニメーションの動きの部分は@keyframesで作成し、spanタグに指定します。各spanタグにdelayを設定して少しずつアニメーションが遅れて実行されるようにしています。

詳しくは下記をご参照いただければと思います。

CSS

@keyframes wave {
  100% {
    transform: translate3d(0, -10px, 0);
  }
}

.wave {
  display: block;
  width: 150px;
  text-align: center;
}

.wave span {
  display: inline-block;
  color: #fff;
  font-size: 2em;
}

.wave:hover span {
  animation-name: wave;
  animation-duration: .2s;
  animation-direction: alternate;
  animation-iteration-count: 2;
}

.wave:hover span:nth-child(2) {
  animation-delay: .1s;
}

.wave:hover span:nth-child(3) {
  animation-delay: .2s;
}

.wave:hover span:nth-child(4) {
  animation-delay: .3s;
}

ここまでの内容を記述すると、下記のようなアニメーションが完成しているかと思います。

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

最後に

いかがでしたでしょうか。

本記事でご紹介したウェーブのアニメーションは@keyframesとanimationの基本的な内容で作成しました。アニメーションの実行時間や遅延の設定を好きな時間に設定することで独特な動きをするウェーブアニメーションが作れるかと思いますので、ぜひ色々改良していただければ幸いです。

以上、マウスオーバーでテキストがウェーブするCSSアニメーションのご紹介でした！