CSSでタイピングしているようなアニメーションをつくる
最初は 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文字あたりの幅が変わってくるので、そこも注意。