純粋なHTML+CSSでタイピング効果を実現

<div class="text">こんにちは、世界！</div>

：根 {
    /* 文字数 */
    --ステップ: 12;
    /* アニメーション時間 */
    --期間: 2.5秒;
    /* フォントサイズ */
    --フォントサイズ: 50px;
    /* カーソルサイズ */
    --カーソルサイズ: 20px;
}

。文章 {
    色: #333;;
    位置: 相対的;
    表示: インラインブロック;
    フォント ファミリ: 'Courier New'、Courier、等幅フォント;
    フォントサイズ: var(--fontSize);
    行の高さ: 1;
}

.text::after {
    コンテンツ： '';
    幅: var(--cursorSize);
    高さ: var(--fontSize);
    背景色: 黒;
    zインデックス: 2;
    位置: 絶対;
    アニメーション: 1秒点滅 var(--duration) step-end infinite,
               moveCursor var(--duration) steps(var(--steps)) 前進します。
}

.text::before {
    コンテンツ： '';
    幅: 100%;
    高さ: var(--fontSize);
    zインデックス: 1;
    位置: 絶対;
    背景: linear-gradient(#fff, #fff) 繰り返しなし 右上;
    アニメーション: showText var(--duration) steps(var(--steps)) forwards;
}

/* カーソル点滅アニメーション*/
@keyframes 点滅 {
    0% {
        背景色: 黒;
    }
    50% {
        背景色: 透明;
    }
    100% {
        背景色: 黒;
    }
}

/* カーソル移動アニメーション*/
@keyframes カーソルを移動 {
    0% {
        残り: 0%;
    }
    100% {
        左: 100%;
    }
}

/* 背景移動アニメーション */
@keyframes 表示テキスト {
    0% {
        背景サイズ: 100% 100%;
    }
    100% {
        背景サイズ: 0% 100%;
    }
}