文字と背景のアニメーション

文字と背景のアニメーションと表現していますが、実際に見てみないとわからないと思うのでまずはデモを用意しています

「動かす」をクリックでアニメーションが開始し、「もどす」をクリックすると一旦リセットされるので繰り返し動きが確認できます。

基本となるコード

今回のサンプルで準備したコードはこちらになります

HTMLでは全体をクラス「text」をつけたdiv要素で囲み、一行をクラス「text_underline」をつけたdiv要素で囲み、更にクラス「text_move」をつけたspan要素で囲みます

cssのコードは個人的に肝になっているかなというところだけ紹介しておきますが、それぞれ確認していただければ問題ないかと思います

、全体を囲んでいる「.text」にflex系のプロパティを使って縦並びにしつつ、幅を文章量と同じにしています

アンダーラインのアニメーションは「.text_underline」の擬似要素を用意し、この擬似要素に単色のグラデーションを指定し、「background-size」プロパティで指定しています。
「height」プロパティと「background-size」プロパティで予めラインの高さを指定しておき、ラインの幅は0%から100%になるようにキーフレームアニメーションを設定します

下から文字が出てくるアニメーションは「.text_move」に指定していきます
こちらは「position」プロパティを使ってキーフレームアニメーションで動かしているだけなので問題ないかと思いますが、動かす量はフォントの種類やサイズ、line-heightによって変わるので都度調整していくしかありません

これだけなんですが、jsと組み合わせていけばアイキャッチ部分以外でも使えるので、どのサイトでも使っていてマンネリ化しつつある下からフェードインとは違ったアニメーションにすることも可能かと思われます。