CSSアニメーションでタイピング風にテキストを表示させる方法【keyframes】

2025年9月6日2025年11月6日

ある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>

<!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;
}

* {
    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 animation-name {
  0% {
    width: 0ch;
    }
  100% {
    width: 11ch;
    }
}

keyframesの特徴は、上のコードのように

すぐ後ろにアニメーション名を入れる
0%〜100%の値を入れて、表示を変えることによってアニメーションに見せる

ことです。

①すぐ後ろにアニメーション名を入れる

@keyframesを利用するには、すぐ後ろにアニメーション名を入れます（今回だったら、「typing」がアニメーション名になります）。

またアニメーションを当てたいタグやclassには、animationプロパティを設定します。

.typing {
    animation: typing 2s steps(11) infinite;
    /* 左から順に、アニメーション名、実行時間、ステップ数、アニメーションが停止するまでの周期 */
}

.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;
  }
}

@keyframes animation-name {
  from {
    background: red;
  }
  to {
    background: blue;
  }
}

のように、fromとtoで記述することもあります。

まとめ

ということで、今回はkeyframesを利用してタイピング風にテキストを表示するアニメーションを実装してきました。

ここまでを軽くおさらいすると

CSSでタイピング風にテキストを表示させるアニメーションを実装するには、「keyframes」を利用する
keyframesの後ろにはアニメーション名を指定し、animation-nameとanimation-durationは必須

ということでした。

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。

記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ

フォロー数やいいね数が増えるかもしれません！

応援メッセージ・投げ銭を送る！

＼最新情報をチェック／

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

y_programing

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。大手有名企業の提携会社のサイト制作も経験。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。