文字が1文字ずつ打たれていくタイプライター演出。steps()イージングとwidthアニメーション、点滅キャレットの組み合わせです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
幅を0から21ch（=21文字分）へ、steps(21)で21段階に区切って広げることで「1文字ずつ現れる」動きになります。滑らかに広げるのではなく階段状に進むのがsteps()の役割です。右ボーダーをキャレットに見立て、別のアニメーションで点滅させています。ch単位は半角文字の幅基準なので、文字数とステップ数を一致させるのがコツです。
日本語（全角）はchと幅が合わないため、この手法は等幅フォントの英数字向けです。日本語ではclip-pathを使う方法もあります。