【備忘録】文字を1文字ずつウェーブさせながら表示

こんにちは！ワタナベです。

今回は文字を1文字ずつウェーブさせながら表示する方法の備忘録です。

See the Pen
by Akiho (@wcaotdaenpaebne)
on CodePen.

↑スクロールすると表示されます！

動きをつけたい文字の数やサイズによって、ウェーブさせる高さを変更したり、「animation-duration」や「animation-delay」をカスタマイズすると良いです(^O^)

ちょっとしたワンポイントにどうぞ！

↓参考にさせていただきました！TAHNKS(*´ω｀)

 Into the Program

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

https://into-the-program.com/hover-animation6/

マウスオーバーでテキストがウェーブするCSSのアニメーションのご紹介です。 リンクやボタン、テキストにマウスカーソルを乗せると、要素が持っているテキストが一文字ずつ跳ねるように動くアニメーションです。

それではまた次回。

ご閲覧ありがとうございました♪