はじめに

CSSを学びたい！Step12です！今回はキータイピングを実現していきます！！

成果物

ソースコード

index.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="styles.css">
</head>
<body>
    <div class="typing-effect">これはタイピングエフェクトのテキストです。</div>
</body>
</html>

styles.css

@keyframes typing {
    from { width: 0; } /* アニメーションの開始時点で幅を0に設定 */
    to { width: 100%; } /* アニメーションの終了時点で幅を100%に設定 */
}

@keyframes blink-caret {
    from, to { border-color: transparent; } /* アニメーションの開始と終了時点でカーソルを透明に設定 */
    50% { border-color: black; } /* アニメーションの中間点でカーソルを黒に設定 */
}

.typing-effect {
    font-family: monospace; /* 等幅フォントを使用 */
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* 要素の内容がはみ出さないように隠す */
    border-right: 0.15em solid black; /* 右側にカーソルを表示 */
    width: 0; /* 初期幅を0に設定 */
    animation: typing 3.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite; /* タイピングとカーソルの点滅アニメーションを設定 */
}

→CSSだけでこんなにできると面白いですね！！