【CSSアニメーション】文字を順番に表示させる方法を解説します。

なやむくん

文字を順番に表示させたい。

なやむさん

ドミノ倒しのようなアニメーションを実装したいけど方法がわからない。

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

文字を順番に表示させるアニメーションは、特に難しい記述は必要なく初心者でも簡単に実装することが可能です。

実装することでWebページを訪れたユーザーに情報をわかりやすく伝えるために、テキストを一度に全て表示するのではなく、順番に表示させることでその内容に対して興味を持たすことができます。

主に使用する部分はタイトル、キャッチフレーズ、または重要なメッセージで、その効果はユーザーのサイト閲覧による満足度にも大きく影響します。

このような魅力を持ったアニメーションを苦手意識を持つ方にも簡単に実装してもらえるように解説していきます。

よろこびくん

今回の記事を読むことでCSSのみで1文字ずつ表示させるアニメーションを作成できるようになるんですね！

みつた

はい！Javascriptで作成する方法もありますが、苦手な方もいると思いますので今回はCSSのみで実装する方法を解説します。

１文字ずつ下から上に表示されるアニメーション

まずは１文字ずつ下から上に表示されるアニメーションを紹介いたします。

See the Pen 1文字ずつ表示させるアニメーション by koutarou mori (@koutarou-mori) on CodePen.

CSSだけで実現しているのでJSが苦手な方でも手が出しやすいのではないでしょうか。

それではどのように実装しているのかを解説していきます。

HTMLコードの解説

まずはHTMLの解説です。

    <div class="txt">
        <p>1</p>
        <p>文</p>
        <p>字</p>
        <p>ず</p>
        <p>つ</p>
        <p>表</p>
        <p>示</p>
        <p>さ</p>
        <p>れ</p>
        <p>ま</p>
        <p>す</p>
        <p>。</p>
    </div><!-- /.txt -->

1文字ずつ表示させるには、まず1文字ずつそれぞれにpタグで囲んでいます。

それぞれ囲んだpタグ1つ1つに時間差で下から表示させるCSSを付与していくことで、1文字ずつ表示させています。

みつた

1文字ずつにタグを囲むなんて普段はやることないですよね...。

CSSコードの解説

次にCSSの解説に入ります。

.txt {
    display: flex;
    overflow: hidden;
}

.txt p {
    color: cadetblue;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: .06em;
    margin: 0;

    /* ここからアニメーション関係 */
    transform: translateY(2em);
    animation: textanimation 1s forwards;
}
/* 1文字目 */
.txt p:nth-child(1) {
    animation-delay: 0.2s
}
/* 2文字目 */
.txt p:nth-child(2) {
    animation-delay: 0.4s
}
/* 3文字目 */
.txt p:nth-child(3) {
    animation-delay: 0.6s
}
/* 4文字目 */
.txt p:nth-child(4) {
    animation-delay: 0.8s
}
/* 5文字目 */
.txt p:nth-child(5) {
    animation-delay: 1s
}
/* 6文字目 */
.txt p:nth-child(6) {
    animation-delay: 1.2s
}
/* 7文字目 */
.txt p:nth-child(7) {
    animation-delay: 1.4s
}
/* 8文字目 */
.txt p:nth-child(8) {
    animation-delay: 1.6s
}
/* 9文字目 */
.txt p:nth-child(9) {
    animation-delay: 1.8s
}
/* 10文字目 */
.txt p:nth-child(10) {
    animation-delay: 2s
}
/* 11文字目 */
.txt p:nth-child(11) {
    animation-delay: 2.2s
}
/* 12文字目 */
.txt p:nth-child(12) {
    animation-delay: 2.4s
}


@keyframes textanimation {
    0% {
        transform: translateY(2em);
    }

    100% {
        transform: translateY(0);
    }
}

それでは順に解説していきます。

文字を横並びにする

通常あまりないので意識しないことなのですが、今回は文字1つ1つに対しCSSを指定するので1文字ずつpタグで囲んでいます。

そのためこのままでは文字が縦に並んでしまうのでdisplay: flex;を使用して要素を横並びにします。

display: flex;は子要素のpタグの親要素であるtxtクラスに指定します。

要素の領域外の内容は見えないようにする

以下の画像はテキスト要素の領域を検証ツールで確認したものになります。

このように紫色の点線内が各文字の要素領域です。

アニメーション開始時に文字が見えないのは、この領域外にある内容を非表示にするoverflow: hidden;を指定しているためです。

なのでこの後に説明しますが、アニメーション開始前に文字にtransform: translateY(2em); を指定して要素の領域外に文字を移動することで文字を見えないようにしています。

文字を領域外に移動させ見えないようにする

先程overflow: hidden; を指定して要素の領域外の内容は見えないように設定しました。

なので最初アニメーションが開始される前は文字が見えない状態なので、要素の領域外に文字を移動させるためにtransform: translateY(2em);を指定します。

このプロパティを指定することで、要素をY軸方向に移動させることができます。

今回は値に2emを指定しているので下に2em分移動させています。

これで要素は領域外に移動されるので文字は見えなくなるはずです。

アニメーションの設定

animationプロパティを使用してアニメーション関連のCSSプロパティを一括で設定しています。

今回はanimation: textanimation 1s forwards;を指定しました。

textanimation はanimation-nameプロパティでアニメーションを定義する名前を決めています。

1sは何かというと、アニメーションの再生時間を指定しています。1sなので１秒間アニメーションを再生するということになります。

forwardsは、animation-fill-modeプロパティで指定しており、アニメーションが終了する時にその状態のCSSを適用するという設定です。

通常アニメーションは修了時にアニメーションに開始前に戻ってしまいますが、このforwardsを値に指定することでアニメーションが終わった状態のまま維持してくれます。

@keyframesやanimationプロパティについて詳しく知りたい方は以下の記事を参考にしてみてください！

文字を囲むpタグにそれぞれアニメーションの開始遅延を指定

それぞれの文字にpタグを囲んでいますが、その理由がこのタイトルです。

文字を囲んでいるpタグにそれぞれanimation-delayプロパティで異なる遅延時間を指定することで次々と文字が表示されるような動き実現しています。

今回は0.2秒ごとに設定していますので、各文字0.2秒ごとに表示されるようになっています。

@keyframesで文字の位置を元に戻す指定

現在文字は要素の領域外にあるため見えなくなっています。

これを@keyframes内に文字の本来ある位置に戻してあげる指定をしてあげます。

何を指定するかというと、@keyframesの100%（終了時）にtransform: translateY(0);を指定してあげるだけです。

transform: translateY(0); は本来の位置なので、この指定をするとアニメーション開始時に隠れている部分から文字が出てくるような見え方になります。

これらの指定をして文字が下から上に表示されるような動きを実装しています。

簡単カスタマイズ！下から浮き上がるように表示

まずは完成例を見てみてください。

See the Pen 1文字ずつ表示させるアニメーション【浮き上がり】 by koutarou mori (@koutarou-mori) on CodePen.

よろこびくん

文字が浮き上がるように表示されました！

みつた

これ実は超簡単です。

こちらですがCSSに2行追加しただけで、追加したコードは以下です。

.txt {
    display: flex;
    overflow: hidden;
    padding-top: 2em; /* 浮き上がる分の要素の領域の確保 */
}

@keyframes textanimation {
    0% {
        transform: translateY(2em);
    }

    50% {
        transform: translateY(-1em); /* 浮き上がるアニメーションの指定 */
    }

    100% {
        transform: translateY(0);
    }
}

padding-top: 2em; は浮き上がる分の要素の領域を確保するために指定しています。

これがないと浮き上がりの際に切れて表示されたり、そもそも見えなかったりするので値を調整してコードを追記してください。

transform: translateY(-1em); は浮き上がるようにするために指定しています。

今回は1emとしていますが、ここもお好みで調整してください。

みつた

ここで紹介したコードをカスタマイズして別の表示方法も紹介します！

1文字ずつフェードインさせながら表示

以下が完成例です。

See the Pen 1文字ずつ表示させるアニメーション【フェードイン】 by koutarou mori (@koutarou-mori) on CodePen.

基本的に最初に解説したコードと変わりませんので、変更した箇所のみ解説していきます。

変更した箇所は以下のとおりです。

.txt p {
    color: cadetblue;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: .06em;
    margin: 0;

    /* ここからアニメーション関係 */
    opacity: 0; /* 文字を透明化 */
    animation: textanimation 1s forwards;
}

/* 要素を徐々に表示 */
@keyframes textanimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

元々transform: translateY(2em); だった箇所をopacity: 0; に変更しています。

opacity: 0; は要素を透明にします。

アニメーション開始時に透明にすることで非表示のように見せています。

みつた

display: none;と違って、opacity: 0; は要素を非表示ではなく透明にしているだけなので要素は存在しています！

そして@keyframes内のtransformプロパティもopacityプロパティに変更しています。

これにより下から上にという動きはなくなり、その場でフェードイン表示してくれます。

みつた

元々の記述してあるoverflow: hidden; やpadding-top: 2em; はこのフェードイン表示では不要なので消してしまってOKです。

左から右にスライドイン表示

次はテキストを左から右にスライドで表示させるようなアニメーションをご紹介します。

以下が完成例です。

See the Pen 1文字ずつ表示させるアニメーション【スライドイン】 by koutarou mori (@koutarou-mori) on CodePen.

HTMLは解説する内容が特にないのでCSSについて解説していきます。

CSSコードの解説

今回使用しているCSSコードは以下です。

.txt {
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: cadetblue;
    animation: textanimation 1s 2s forwards;
    margin: 0;
}

@keyframes textanimation {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0);
    }
}

clip-pathプロパティを使用してテキストをスライドイン表示させる

このアニメーションで重要となるのがclip-pathプロパティです。

みつた

clip-pathプロパティは、要素のクリッピングなどでよく使用されます。

今回はclip-path: inset(0 100% 0 0);をtxtクラスに指定して、@keyframeではアニメーションの終わりにclip-path: inset(0);を指定しています。

inset()関数は、要素の内部に対するクリッピングパスを指定するための関数です。

この関数の引数は、上端、右端、下端、左端の順番に距離を指定することができ、今回指定しているinset(0 100% 0 0)では、上端と下端は 0 で、右端は 100%（親要素の幅と同じ）で、左端は 0 です。

つまり、このクリッピングパスはtxtクラスの表示を右端から開始し、左端まで表示されないようにするために使用されています。

@keyframesの指定の内容は、アニメーションが実行される際にtxtクラスの右端から徐々に表示され、最終的には完全に表示されます。

アニメーションが実行される際に clip-path プロパティが変化し、txtクラスの表示するアニメーションを実行します。

みつた

解説であまりイメージができないようでしたら、一旦コピペした後に値を変更して動作を何度か確認してみてください！

本記事のまとめ

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

本記事のまとめです。