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%); で隠れた文字を元の位置へ戻す。
