PlusOne Blog

CSSのみで、テキストがタイピングで入力されたようなエフェクトをつけたい方法を紹介します。
　

　
＜解説＞
　

　　　animation: typingdemo 8s steps(36), blinking .5s step-end infinite alternate;
　　　
　　　@keyframes typingdemo {
  　　　from {
    　　　width: 0
  　　　}
　　　}
    
　　　@keyframes blinking {
  　　　50% {
    　　　border-color: transparent
  　　　}
　　　}

　
①「.wrapper」に flex-box で、テキストを上下左右に中央揃え
　
②「.typing-demo」の横幅の長さを文字数にするため、「ch」の単位で設定
「ch」の単位は、「0」を表示したときの文字の横幅の長さを「1ch」とする単位。
このため、「0」と他の文字の横幅サイズがほぼ同じフォントを使う必要がある。
　
③「.typing-demo」を animation で、文字の横幅を 0 から設定している文字幅まで、22ステップにわけて延ばしていく。
　
④テキスト最後のカーソルは、罫線をアニメーションで表示・非表示を切り替えて表現している。
　
　
★→この手法は、あくまで使用するフォントが「0」と他の文字の横幅が同じでないとうまくできない。どうしても、そうでないフォントを使用したい場合は、各パラメータを細かく設定する必要がでてくる。