【CSS】1文字ずつバラバラにテキストアニメーションするCSS

CSSとアニメーションを使用して各文字を上から下へ1文字ずつ降ってくるアニメーションを作ります。

HTML部分を作成する

まずは、アニメーションの土台になるHTML部分を作成します。

<div class="animation-container">
    <div class="falling-text">
        <span class="letter">H</span>
        <span class="letter">e</span>
        <span class="letter">l</span>
        <span class="letter">l</span>
        <span class="letter">o</span>
        <span class="letter">,</span>
        <span class="letter">&nbsp;</span>
        <span class="letter">W</span>
        <span class="letter">o</span>
        <span class="letter">r</span>
        <span class="letter">l</span>
        <span class="letter">d</span>
        <span class="letter">!</span>
    </div>
</div>

CSS部分を作る

このCSSは、テキスト全体が上から下へ移動する fall アニメーションと、各文字がそれぞれ独立して同じく上から下へ移動する fallLetter アニメーションを定義しています。

<style>
        .animation-container {
            position: relative;
            overflow: hidden;
            height: 2em; /* テキストのサイズに合わせて調整 */
        }

        .falling-text {
            position: relative;
            display: flex;
            animation: fallLetter 2s linear infinite; /* アニメーションの持続時間を必要に応じて調整 */
        }

        .letter {
            display: inline-block;
            opacity: 0;
            transform: translateY(-100%);
            animation: fallLetter 2s linear infinite; /* アニメーションの持続時間を必要に応じて調整 */
        }

        @keyframes fallLetter {
            0% {
                opacity: 0;
                transform: translateY(-100%);
            }
            10% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 1;
                transform: translateY(100%);
            }
        }

        /* 各文字のアニメーション遅延 */
        .letter:nth-child(1) { animation-delay: 0s; }
        .letter:nth-child(2) { animation-delay: 0.1s; }
        .letter:nth-child(3) { animation-delay: 0.2s; }
        .letter:nth-child(4) { animation-delay: 0.3s; }
        .letter:nth-child(5) { animation-delay: 0.4s; }
        .letter:nth-child(6) { animation-delay: 0.5s; }
        .letter:nth-child(7) { animation-delay: 0.6s; }
        .letter:nth-child(8) { animation-delay: 0.7s; }
        .letter:nth-child(9) { animation-delay: 0.8s; }
        .letter:nth-child(10) { animation-delay: 0.9s; }
        .letter:nth-child(11) { animation-delay: 1.0s; }
        .letter:nth-child(12) { animation-delay: 1.1s; }
        .letter:nth-child(13) { animation-delay: 1.2s; }
    </style>

このコードでは、各文字に nth-child セレクタを使用してアニメーションの遅延時間を設定しています。

アニメーションの速度や他のスタイルは必要に応じて調整できます。

まとめ

これにより、各文字が異なるタイミングでアニメーションを開始し、1文字ずつずらして動く効果が生まれます。アニメーションの速度や遅延時間などを調整して、望む結果に合わせてください。