【CSSアニメーション】タイピングアニメーションの実装方法を解説します。

なやむくん

Webページにタイピングアニメーションを実装したい…。

なやむさん

文字を表示したいがインパクトのある表示方法で視線誘導を行いたい。

などの疑問や悩みを解決してまいります。

要素を非表示から表示に切り替える際に、何かアニメーションを実装してあげることで、ユーザーの視線誘導のアプローチにつながり、サイト自体へのアクセントとなるメリットがあります。

その方法は様々ですが、今回はタイピング風アニメーションの実装方法について解説してきます。

なやむくん

タイピングをしている状態をCSSだけで実装できるのですか？

みつた

js不要で実装できますよ！

完成例

まずはタイピングアニメーションの完成例をご紹介します。

英語と日本語をそれぞれ用意しており、CSSで指定している値が違う点に注目してください。

こちらについては後ほど説明します。

↓英語版（ページ読み込み時にアニメーションがスタートしているので「Return」をクリックして確認してください。）

See the Pen タイピングアニメーション by koutarou mori (@koutarou-mori) on CodePen.

↓日本語版（ページ読み込み時にアニメーションがスタートしているので「Return」をクリックして確認してください。）

See the Pen タイピングアニメーション by koutarou mori (@koutarou-mori) on CodePen.

実装方法解説

それでは実装方法について解説していきます。

タイピングアニメーションの基本的な実装方法と、なぜ英語と日本語の両方の実装方法を紹介しているのかについても、初心者にもわかりやすく説明していきます。

まずHTMLにはタイピングアニメーションを実装したいテキストを表示させます。

<p class="typing-text-en">Hello World</p>

みつた

HTMLはこれだけです。

次にCSSは以下のコードを使用しました。

.typing-text-en {
  width: 11ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #444;
  font-size: 2em;
  font-family: monospace;
  color: #444;
  animation: typing 2s steps(11), typingEffect .5s step-end infinite alternate;
}
 
@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes typingEffect {
  50% {
    border-color: transparent
  }
}

なやむくん

部分的によくわからない記述があります…。

みつた

一緒に学んでいきましょう！

単位「ch」を使用して、文字数分の幅を指定する

基本的にCSSで使う単位にはpxやem、remなどですがchという単位も存在します。

なやむさん

見たことない単位なのですが、これは何でしょうか…。

みつた

説明しますね！

これはchracter unitの略称で、「0」の文字幅が単位となります。

つまり10chで「0」が10文字入る幅が作成できます。

width: 11ch;

英語版の文字「Hello World」は半角スペースの区切りを含めて11文字であるため上記の指定をして幅を確保しています。

みつた

半角スペース分をしっかり確保してあげることがポイントです。

2つの必須プロパティ

タイピングアニメーションの実装において欠かせないプロパティが2つあります。

実際に上記のプロパティを抜いた状態だと以下のようになってしまいますので必ず追加しましょう。
（ページ読み込み時にアニメーションがスタートしているので「Return」をクリックして確認してください。）

See the Pen タイピングアニメーション失敗 by koutarou mori (@koutarou-mori) on CodePen.

点滅の縦線はborderプロパティで

タイピングする際に欠かせないエフェクトが縦線の点滅ですよね。

これはborder-rightを指定して、それに対してkeyframesにborder-color: transparentを指定して点滅を表現しています。

border-right: 3px solid #444;

@keyframes typingEffect {
  50% {
    border-color: transparent
  }
}

点滅アニメーションに関する記事は以下にもあります。

タイピング風のアニメーションを表現する

以下の記述がタイピング風アニメーションの設定部分になります。

animation: typing 2s steps(11), typingEffect .5s step-end infinite alternate;

@keyframes typing {
  from {
    width: 0
  }
}

@keyframes typingEffect {
  50% {
    border-color: transparent
  }
}

まず初めに、typing 2s steps(11)という部分はtypingのkeyframesでスタート時にwidthの値を0にしています。

このようにすることでアニメーションが始まる前は非表示の状態を作っています。

アニメーションが開始されたら2sと指定していますので、2秒間でタイピングアニメーションが終了するということになります。

つまり2秒間でタイピングされるといった感じです。

steps()はコマ送りにしてくれる設定です。

今回は引数に「11」を指定しているので11文字分表示するようにコマ送りしてくれるため、1文字ずつ表示されるような見え方が表現できます。

typingEffect .5s step-endは、縦線の点滅の速度を0.5秒間行っている指定がされています。

step-endはsteps(1, end)と同じ意味で、endの場合、最初のインターバルが経過後に1段階目の変化が発生する指定です。

infiniteはアニメーションを無限に再生し、alternateは奇数回では普通方向の再生、偶数回では逆方向の再生を行いアニメーションを繰り返します。

アニメーションの詳細については以下記事でまとめてあります。

英語版（半角文字）と日本語版（全角文字）

ここまではタイピングアニメーションの基本的な実装方法について解説しました。

実際はここまでの記事でも良かったのですが、初心者の方では日本語にアニメーションを実装する場合に少し戸惑う可能性があるということから日本語の方についても解説していきます。

まず英語版と日本語版で異なる部分はCSSになります。

数値の指定が違うので見てみましょう。

.typing-text-ja {
  width: 38ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #444;
  font-size: 2em;
  font-family: monospace;
  color: #444;
  animation: typing 3s steps(19), typingEffect .5s step-end infinite alternate;
}

よろこびくん

わかった！文字数が違うからwidthの値を変更しているからでしょうか？？

みつた

惜しいですね。文字数が違うだけなら日本語版は作らないです...!以下説明を見てみてください。

先程chという単位は「0」の幅を1chとなる説明はしました。

しかし日本語になると全角となるので幅が変化するため英語版のCSSの指定では実際の文字の幅と異なるため綺麗アニメーションを実装することができないのです。

そのため半角が1chとするならば全角の場合は表示する文字数の2倍の指定することで実現できます。

width: 38ch;

animation: typing 3s steps(19), typingEffect .5s step-end infinite alternate;

widthの値を文字数分38chと指定に変更されていることに気が付いた方いますでしょうか。

これで文字分の幅の確保ができました。

そしてsteps()の引数の数値についても変更が必要です。

38文字に対してですので、19（半分の数値）と指定します。

width: 38ch;に対してsteps(38)だと半角文字に対して38コマ送りするということになりますが、今回は全角文字であり1コマ当たり2chに分割する必要があるためsteps()の引数には文字数の半分の数値を指定してあげることでタイピングアニメーションを再現することができるようになります。

まとめ　

ここまで読んでいただきありがとうございました。

本記事のまとめです。