CSSでタイピングしているようなアニメーションをつくる

codepen.io

最初は width: 0 にしておいて最後はすべてのテキストがぴったり表示されるくらいの幅(ここでは width:250px)まで広げる感じ。
ポイントは steps を使うことで、連続ではなく1フレームごとにパッと切り替えるようにする。

steps(n)n の値と、アニメーションに指定する animation-duration をうまく調整して、1フレームで1文字分ずつ幅を広げるようにする。

.typing .hello {
  width: 0;
  animation:
    type 1.6s steps(13, end) 1000ms forwards;
}

@keyframes type {
  to {
    width: 250px;
  }
}

あと、等倍フォントを使わないと1文字あたりの幅が変わってくるので、そこも注意。