CSS:文字を一文字ずつ表示する(タイプライター)

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> でくくって変化をつければいろいろできそうな予感がします。