CSS3だけでタイピングアニメーション

CSS3だけでタイピングアニメーション

CSS3のanimation プロパティを使って、テキストがタイプライターのように一文字づつ表示されるアニメーションのサンプルコードを記述しています。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

タイピングアニメーション

animationの動きはwidth: 文字数emをsteps(n)で文字数分コマ送りをしています。カーソルはborder-rightの色を透明にするアニメーションを繰り返すことで表現しています。

サンプルコード

以下は実際に、テキストをタイピングアニメーションで表示したサンプルコードとなります。

ブラウザ上で表示した結果
(ページを再読み込みするとアニメーションが動きます。)

CSS3だけでタイピングアニメーション!