1文字ずつ表示するアニメーション[SCSSだけ]

SCSS だけで簡単!一文字ずつ表示するアニメーション

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

※右下の rerun を押すと再読み込みします

解説

HTML

アニメーションをつけたい要素の中の文字を一文字ずつ<span>で囲う

SCSS

#title

  • display: flex; = <span> を横並びにするため
  • overflow: hidden; = 枠外への表示を隠す
  • color + font-size + font-weight = 文字の装飾なのでお好きな CSS をつけてください

span

  • transform: translateY(105%) = Y方向(下方向)に 105% ずらす。 overflow: hidden; により文字が消える。
  • @for $i from 1 to 10{ } = 繰り返し動作を行うループ関数。文字の長さにより「文字の数 + 1 」になるように 10 の値を調整。( 例 : りんご なら 3文字+1 なので from1 to 4 )
  • &:nth-child(#{$i}){ } = @for でループ中の数値が $i に挿入される。これにより全ての span に animetion をつけていく
  • animation: fadeInText = @keyframes から fadeInText というアニメーションを呼び出す。追記の意味については下記の通り

animation の追記について

  • 1s = アニメーションが終わるまでの時間、1s = 1秒
  • ease = アニメーションのスピード、ゆっくりはじまり、ゆっくり終わる
  • .1*$i+s = アニメーションが始まるまでの時間、本来は .3s や 0.3s と記載する。.1 * $i とすることで 1文字毎に 0.1s ずつ遅れてアニメーションが始まる
  • forwards = アニメーションが終わった後の処理。この記載がないとアニメーションが終わった時に初期位置に戻る(また隠れる)

@keyframes

transform: translateY(0); = span の CSS に使用した transform: translateY(105%); で隠れた文字を元の位置へ戻す。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。