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