あるWebサイトを開いた際に、タイピングのように1文字ずつ表示されるテキストを見て
「何これ、すげぇ！やってみたい！！」
と思ったのはボクだけではないはず（勘違い？）。
今回は、タイピング風にテキストを表示させるアニメーションのコーディングを解説していきます！
しかも、今回の方法はJavaScriptは使用しないので（HTMLと）CSSだけで完結できるので
jsを実装したことがない
・「Web制作をこれから初めてみたい！」
・「まだ学習して間もないです。。」
という方でも実装できます。
できるだけ分かりやすく、丁寧に解説していきますので
ぜひ最後まで見ていってくださいね！
CSSアニメーションでタイピング風にテキストを表示させる方法
さっそくコーディングを解説していく前に、実際にどのようにブラウザに表示されるのか、ということを知っていただきましょう。
今回のアニメーションは、右の「Result」のように表示されます。
See the Pen CSSアニメーション（タイピング風） by わい (@y_programing) on CodePen.
HTMLはこちら。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイピング風にテキストを出力</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<div class="typing">
CodeSnow...
</div>
</div>
</body>
</html>CSSはこちら。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.typing {
font: 900 4rem/1 "JetBrains Mono", monospace;
width: 11ch;
overflow: hidden;
animation: typing 2s steps(11) infinite;
}
@keyframes typing {
0%, 30% {
width: 0ch;
}
70%, 100% {
width: 11ch;
}
}
.wapper {
padding: 5rem;
}CSSでアニメーションを利用するには、@keyframes
jsを利用せず、CSSだけでアニメーションを実装する場合には、主に
・transitionを利用する
・keyframesを利用する
の2つの選択肢がありますが、今回は後者の「keyframes」を利用する方法を紹介します。
@keyframes animation-name {
0% {
width: 0ch;
}
100% {
width: 11ch;
}
}keyframesの特徴は、上のコードのように
①すぐ後ろにアニメーション名を入れる
②0%〜100%の値を入れて、表示を変えることによってアニメーションに見せる
ことです。
①すぐ後ろにアニメーション名を入れる
@keyframesを利用するには、すぐ後ろにアニメーション名を入れます（今回だったら、typing）。
また、アニメーションを当てたいタグやclassには、animationプロパティを設定します。
.typing {
animation: typing 2s steps(11) infinite;
/* 左から順に、アニメーション名、実行時間、ステップ数、アニメーションが停止するまでの周期 */
}今回のanimationプロパティには、左から順番に
・アニメーション名（animation-name）
・アニメーション実行時間（animation-duration）
・ステップ数（animation-timing-function）
・アニメーションが停止するまでの周期（animation-iteration-count）
を指定しています。
この中で、animationプロパティに設定しなくてはいけない必須の項目は
アニメーション名（animation-name）とアニメーション実行時間（animation-duration）です。
今回のanimationプロパティを見ると、
・animation-nameは、typingと設定されており
・animation-duration、つまりアニメーションの実行時間は2秒
・animation-timing-functionは、steps(11)
・animation-iteration-countはinfinite、つまり永遠に繰り返す
となっています。
つまり、「2秒かけて『CodeSnow…』というテキストをタイピング風に1文字ずつ表示をし、それを永遠に繰り返す」というアニメーションを実行しているわけです。
正直、steps関数に関してはあまり出てこないかと思いますので「そんなものがあるんだな」くらいの認識でいいですが
animationプロパティには、animation-nameとanimation-durationの設定が必須ということは覚えておいてください。
②0%〜100%の値を入れて、表示を変えることによってアニメーションに見せる
keyframesでは、0%〜100%の値の状態を変化させることでアニメーションのように見せています。
テレビで放送されているアニメーション、いわゆるanimeも
1枚1枚の表情やポーズが違う絵を、少しずつ変化させて連続で見せることによって
本当に動いているように見せていますよね？
そんな感じで、どの場面（何％）でどのような状態にするかを指定することで、状態に変化を加えアニメーションにしているわけです。
今回は
・0%、30%の時は、width: 0ch;
・70%、100％の時は、width: 11ch;
にしたことによって表示するテキスト量を変化して、タイピング風に見せています。
また、開始時と終了時の状態だけを記述すればいい場合は
@keyframes animation-name {
from {
background: red;
}
to {
background: blue;
}
}のように、fromとtoで記述することもあります。
まとめ
ということで、今回はkeyframesを利用してタイピング風にテキストを表示するアニメーションを実装してきました。
ここまでを軽くおさらいすると
・CSSでタイピング風にテキストを表示させるアニメーションを実装するには、「keyframes」を利用する
・keyframesの後ろにはアニメーション名を指定し、animation-nameとanimation-durationは必須
ということでした。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
＼ 最新情報をチェック ／
コメント