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

たぶん「タイピング CSS アニメーション」でGoogle検索するといっぱい出てくるやつ。自分は以下の記事を参考にした。

Typewriter Effect | CSS-Tricks

Some use JavaScript, which may sometimes be preferable (literally adding a character at a time feels more like a real typewriter) and sometimes not be

 css-tricks.com

トップページのタイトルに使うと、こんな感じ

徐々に横幅を広げるフレームと、カーソルに相当するフレームの2つを組み合わせて、タイピングしているようなアニメーションにしている。

@keyframes typewriter{
  from{width: 0;}
  to{width: 36ch;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgb(30, 30, 30);}
  to{border-right-color: transparent;}
}

徐々に横幅が広げるアニメーションは white-space: nowrap と overflow: hidden を組み合わせる。要はボックスに入らない文字を隠す。

.typing{
  border: 1px solid rgb(108, 108, 108);
  white-space: nowrap;
  overflow: hidden;
  animation: typewriter 3s steps(36) 1s 1 normal both;
}

横に広げるアニメーションのみを使った場合は以下。上記コードは繰り返しなしだが、以下のデモは繰り返しを設定している。

カーソルはボーダーの右端のみを点滅させている。

.typing{
  border: 1px solid rgb(108, 108, 108);
  border-right: 2px solid rgb(30, 30, 30);
  animation: blinkTextCursor 500ms steps(36) infinite normal;
}

以上、2つを組み合わせるとこんな感じ。

@keyframes typewrite の終点 to{width: 36ch;} は固定値 (36ch) を使ってしまっている。おそらく、親ボックスの横幅に揃えさせたり（toは100%と指定する）、JSで制御すれば回避できるはず。

実際に試して、やめた

先日、トップページのソーシャルアイコンを about に移したところ、トップページから絵がなくなり寂しい感じがしたので、上のようなタイピングのアニメーションでも追加しようかな、と思って調べたのが経緯。

実際に入れてみると、映える以前に読みにくい感じがしてしまったので、お蔵入り。