CSSで実現するタイピング風アニメーション

今回紹介するのは、CSSのみで「タイピングしている感じ」を表現するアニメーションです。文字が1文字ずつ表示されるように見せることで、タイピングしているようなエフェクトを実現しています。

1. CSSコードの全体構成

まず、今回使用するCSSコードは以下の通りです。

.wrapper {
  font-weight: bold;
  font-size: 4rem;
  overflow: hidden;
  white-space: nowrap;
  width: 8ch;
  animation: typing 1.5s steps(8) infinite alternate;
}
@keyframes typing {
  from {
    width: 0ch;
  }
}

2. 各プロパティの解説

.wrapper
タイピング風アニメーションを適用する要素です。

• font-weight: bold; と font-size: 4rem; で、文字の太さと大きさを設定しています。
• overflow: hidden; は、表示範囲を制限するための設定で、アニメーションで文字が表示される部分のみを可視化します。
• white-space: nowrap; は、テキストを1行に固定し、改行を防ぎます。
• width: 8ch; は、文字の幅を8文字分に設定します（「delcano」は8文字なのでぴったりです）。
• animation: typing 1.5s steps(8) infinite alternate; でアニメーションを設定します。1.5sでアニメーションの長さを指定し、steps(8)で8文字のテキストを1文字ずつ表示します。infinite alternateは無限ループで、タイピング→削除の繰り返しを行います。

@keyframes typing
タイピングアニメーションを定義します。

• from { width: 0ch; }: 最初は文字幅を0にして、テキストが徐々に表示されるようにします。

3. 実装結果

このCSSを適用すると、指定されたテキスト（例: 「delcano」）が、タイピングしているかのように、1文字ずつ表示されていくアニメーションが実現されます。

4. まとめ

このようなタイピング風アニメーションは、CSSだけで簡単に実装でき、特別なJavaScriptを必要としないため、ページの読み込みも速く保てます。ウェブサイトのイントロや、注目を集めたい部分に使うと効果的です。