1. ホーム
  2. コラム
  3. 【CSSアニメーション#1】文字を一文字ずつ表示させる方法

【CSSアニメーション#1】文字を一文字ずつ表示させる方法

今回は、以下のようなCSSアニメーションのカスタマイズ方法をご紹介します！

WordPressテーマは「SWELL」を利用しています。
ご使用のテーマによっては上手く反映されないことがあります。

Step1

CSSコードの入力

まずは、以下のようにCSSを追加します。

ちなみにCSSは、「カスタマイズ＞追加CSS」もしくは「外観＞テーマファイルエディタ」に記述します。

文字を横並びにする

今回は、一文字ずつpタグで囲って、一文字ずつアニメーションの開始時間を遅らせることで、一文字ずつ表示させています。

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

しかし、見本は表示する文字が3行あるので、このままでは改行できません。

対策として、CSSクラスを3つ用意します。

クラス名は「.txt（1行目）」「.txt2（2行目）」「.txt3（3行目）」にしています。

アニメーション開始前は非表示

また、このままではアニメーション開始前に文字が全て見えてしまうので、overflow: hidden;を使用して要素の領域外は表示させないようにし、そして、transform: translateY(2em);を指定して要素を領域外に移動させます。

アニメーションの設定

animationプロパティを使用します。

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

1sはアニメーションの再生時間を指定しています。

animation-delay:でアニメーションの開始を遅らせます。

今回は一文字ずつ0.2秒間隔で遅らせていきます。

最後に、@keyframesにtransform: translateY(0);を指定して文字の位置を元に戻します。

/*一文字づつ表示される（１行目）*/
.txt {
    display: flex;
    overflow: hidden;
	 font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

.txt p {
    color: #ffffffff;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: .06em;
    margin: 0;
	 line-height:60px;
	 @media (max-width: 480px) { font-size: 40px;
	line-height:40px;
	}

    /* ここからアニメーション関係 */
    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);
    }
}

/*一文字づつ表示される（2行目）*/
.txt2 {
    display: flex;
    overflow: hidden;
	 font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

.txt2 p {
    color: #ffffffff;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: .06em;
    margin: 0;
		 line-height:60px;
	 @media (max-width: 480px) { font-size: 40px;
	line-height:40px;
	}

    /* ここからアニメーション関係 */
    transform: translateY(2em);
    animation: textanimation 1s forwards;
}

/* 9文字目 */
.txt2 p:nth-child(1) {
    animation-delay: 1.8s
}
/* 10文字目 */
.txt2 p:nth-child(2) {
    animation-delay: 2s
}
/* 11文字目 */
.txt2 p:nth-child(3) {
    animation-delay: 2.2s
}
/* 12文字目 */
.txt2 p:nth-child(4) {
    animation-delay: 2.4s
}
/* 12文字目 */
.txt2 p:nth-child(5) {
    animation-delay: 2.6s
}


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

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

/*一文字づつ表示される（3行目）*/
.txt3 {
    display: flex;
    overflow: hidden;
	 font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

.txt3 p {
    color: #ffffffff;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: .06em;
    margin: 0;
		 line-height:60px;
	 @media (max-width: 480px) { font-size: 40px;
	line-height:40px;
	}

    /* ここからアニメーション関係 */
    transform: translateY(2em);
    animation: textanimation 1s forwards;
}
/* 1文字目 */
.txt3 p:nth-child(1) {
    animation-delay: 2.8s
}
/* 2文字目 */
.txt3 p:nth-child(2) {
    animation-delay: 3s
}
/* 3文字目 */
.txt3 p:nth-child(3) {
    animation-delay: 3.2s
}
/* 4文字目 */
.txt3 p:nth-child(4) {
    animation-delay: 3.4s
}
/* 5文字目 */
.txt3 p:nth-child(5) {
    animation-delay: 3.6s
}
/* 6文字目 */
.txt3 p:nth-child(6) {
    animation-delay: 3.8s
}
/* 7文字目 */
.txt3 p:nth-child(7) {
    animation-delay: 4s
}
/* 8文字目 */
.txt3 p:nth-child(8) {
    animation-delay: 4.2s
}
/* 9文字目 */
.txt3 p:nth-child(9) {
    animation-delay: 4.4s
}
/* 10文字目 */
.txt3 p:nth-child(10) {
    animation-delay: 4.6s
}
/* 11文字目 */
.txt3 p:nth-child(11) {
    animation-delay: 4.8s
}
/* 12文字目 */
.txt3 p:nth-child(12) {
    animation-delay: 5s
}


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

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

Step2

次に、アニメーションを表示させたいページで、「カスタムHTML」ブロックを追加して以下のコードを入力します。

ｐタグ内の文字は任意のものに変えてください。

<div class="txt">
        <p>共</p>
        <p>に</p>
        <p>未</p>
        <p>来</p>
        <p>を</p>
        <p>創</p>
        <p>る</p>
        <p>。</p>
    </div><!-- /.txt -->

<div class="txt2">
        <p>北</p>
        <p>九</p>
        <p>州</p>
        <p>に</p>
        <p>、</p>
    </div><!-- /.txt2 -->
<div class="txt3">
        <p>イ</p>
        <p>ノ</p>
        <p>ベ</p>
        <p>ー</p>
        <p>シ</p>
        <p>ョ</p>
        <p>ン</p>
        <p>を</p>
        <p>。</p>
    </div><!-- /.txt3 -->
コラム