CSSの小ネタです。
文字を一文字ずつ表示する
CSSだけで文字を一文字ずつ表示するアニメーションです。
おお、やった！Javascript使わなくてもできるじゃんと思ったんですが、どうやらネット上にはゴロゴロしているようです（笑）。
右下の Rerun をクリックしてください。
See the Pen
by ausnichts (@ausnichts)
on CodePen.
- div要素は背景色をつけているだけです
- 要素pの横幅は（文字サイズ + 文字間）× 文字数です
- border-rightは文字カーソルです
- 要素pの横幅をanimationの stepsを使って変化させます
- stepsの回数は文字数です
この例の場合は、10文字ですので10とし、100％まで0%から90%の10回停止します - この例では要素pに最大横幅を指定していますが、keyframesの100%に指定しても同じです
MDN Web Docs
タイプライターっぽさを出すにはこれで十分だと思いますが、一文字ずつ <span></span> でくくって変化をつければいろいろできそうな予感がします。
