CSSで連続アニメーションを作る方法！初心者でもわかるanimation-delay活用術

連続したアニメーションを作る方法（animation-delay の活用）

先生と生徒の会話形式で理解しよう

生徒

「複数の文字や画像が、順番にズレてふわっと出てくるような動きを作りたいのですが、どうすればいいですか？」

先生

「それは、animation-delay（アニメーション・ディレイ）という設定を使うと簡単に作ることができますよ。」

生徒

「ディレイ……聞き慣れない言葉ですが、私のような初心者でも設定できるものでしょうか？」

先生

「はい！動き出すまでの『待ち時間』を少しずつ変えるだけなんです。具体的な手順を順番に解説しますね！」

1. 連続したアニメーションとは何か？ディレイの役割を理解しよう

ウェブサイトを見ているときに、メニューのボタンが一つずつ順番に現れたり、文字が左からパラパラと流れてきたりする演出を見かけたことはありませんか？これを「連続したアニメーション」と呼びます。プログラミングの専門用語では、複数の要素に対して時間差をつけて動かす手法を指します。

これを実現するために欠かせないのがanimation-delay（アニメーション・ディレイ）という命令です。「ディレイ」とは日本語で「遅延（ちえん）」、つまり「遅らせる」という意味です。アニメーションという動きに対して、「あなたは〇秒待ってから動き出してね」と個別に指示を出すことで、綺麗な時間差を生み出すことができます。

パソコンを触ったことがない方でも、学校の「合唱」をイメージすると分かりやすいかもしれません。みんなが一斉に歌い出すのではなく、一番目の人が歌い出し、その1秒後に二番目の人が歌い出す……という「追いかけっこ（輪唱）」のような仕組みを作るのが、このディレイの役割なのです。この基礎を覚えるだけで、サイトの印象は一気にプロっぽくなります。

2. 時間差を生むための基本単位と書き方のルール

ディレイを設定するときには、時間の単位をコンピュータに伝えてあげる必要があります。一般的には「s（秒）」という単位を使います。例えば、1秒待たせたいときは「1s」、0.5秒なら「0.5s」と記述します。これらはCSS（シーエスエス）という、見た目を整えるための言語の中で記述します。

プログラミング未経験の方が注意すべき点は、数字と単位の間にスペースを入れないことと、必ず最後に「;（セミコロン）」を付けることです。セミコロンは日本語の文章でいう「。」（まる）のような役割をしており、「ここで命令は終わりです」とコンピュータに教えるための大切な印です。

最初は「s」を付け忘れて動かないというミスがよく起こります。パソコンに慣れていないうちは、コードを書いた後に必ず「単位のsがついているかな？」と指差し確認する癖をつけましょう。こうした小さな積み重ねが、エラーを防ぐ一番の近道になります。

3. 複数のボタンを順番にふわっと表示させる方法

それでは、実際に複数のボタンを順番に出現させてみましょう。同じアニメーションの動き（今回は下から上に現れる動き）を全てのボタンに設定し、それぞれのディレイ時間だけを「0s、0.2s、0.4s」のように少しずつ増やしていきます。

このように設定すると、一つ目のボタンは即座に動き出し、二つ目は少し遅れて、三つ目はさらに遅れて動き出します。見た目には滑らかな波のような動きに見えるはずです。SEO対策としても、こうした心地よいアニメーションはユーザーの滞在時間を延ばす効果があり、Google検索での評価にも良い影響を与えると言われています。


<style>
    /* ふわっと浮き上がる動きの台本 */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .box {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin: 10px;
        background-color: #007bff;
        color: white;
        text-align: center;
        line-height: 80px;
        border-radius: 8px;
        /* 全員に同じ動きを設定 */
        animation: fadeUp 0.5s ease-out forwards;
        /* 最初は透明にしておく */
        opacity: 0;
    }

    /* 2番目の箱：0.2秒遅らせる */
    .delay-1 { animation-delay: 0.2s; }
    /* 3番目の箱：0.4秒遅らせる */
    .delay-2 { animation-delay: 0.4s; }
</style>

<div class="box">1番目</div>
<div class="box delay-1">2番目</div>
<div class="box delay-2">3番目</div>

ブラウザ表示

4. 階段のように待ち時間を増やすメリット

なぜ「0.2秒ずつ」のように等間隔でディレイを増やすのでしょうか。それは、人間がリズムとして認識しやすいからです。バラバラな時間を指定してしまうと、コンピュータが壊れてガタガタ動いているように見えてしまうことがあります。階段を一歩ずつ登るように、規則正しく時間をズラすのが、美しい連続アニメーションを作るコツです。

また、一つ一つの動きは素早く（例えば0.5秒など）設定し、待ち時間の差を短くすることで、「シュシュシュッ」と軽快な印象を与えることができます。逆に待ち時間の差を長くすると、一つ一つをじっくり見せる丁寧な印象になります。サイトの雰囲気に合わせて、この「ズレの秒数」を調整してみてください。

難しい言葉でこれを「シーケンシャル・アニメーション」と呼んだりしますが、初心者の方は「階段式の待ち時間」と覚えておけば十分です。これだけで、静止画のようなホームページが、生き生きとしたページに生まれ変わります。

5. 文字を一文字ずつ順番に出すタイピング風の演出

文章の一部を一文字ずつパラパラと表示させるのも、ディレイの得意分野です。見出しの文字などにこれを使うと、読者の目を引くことができます。やり方はボタンの時と同じで、一文字ずつを別々の箱（spanタグと呼びます）に入れて、それぞれに少しずつ異なるディレイ時間を設定します。

文字数が多いとコードを書くのが少し大変になりますが、その分完成したときの感動は大きいです。プログラミングの初心者にとって、自分の書いた命令通りに文字が躍るのを見るのは、とても楽しい経験になります。まずは短い単語から挑戦してみるのがおすすめです。


<style>
    @keyframes charFade {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .text-container span {
        display: inline-block;
        font-size: 24px;
        font-weight: bold;
        animation: charFade 0.3s forwards;
        opacity: 0;
    }

    /* 各文字の待ち時間を細かくズラす */
    .c1 { animation-delay: 0.1s; }
    .c2 { animation-delay: 0.2s; }
    .c3 { animation-delay: 0.3s; }
    .c4 { animation-delay: 0.4s; }
    .c5 { animation-delay: 0.5s; }
</style>

<div class="text-container">
    <span class="c1">こ</span>
    <span class="c2">ん</span>
    <span class="c3">に</span>
    <span class="c4">ち</span>
    <span class="c5">は</span>
</div>

ブラウザ表示

6. 複雑な動き：波打つように揺れるアイコンを作る

次は、待ち時間をズラすことで「波」のような動きを作ってみましょう。例えば、読み込み中の画面などで見かける、複数の丸が順番にピョコピョコ跳ねる動きです。これは全ての丸に「上下に一回跳ねる」というアニメーションを設定し、無限に繰り返すようにします。

ここにディレイを加えると、跳ねるタイミングが横にズレていき、まるで生き物が波打っているような滑らかな連鎖が生まれます。こうした動きはユーザーに「今は準備中ですよ」という情報を視覚的に優しく伝えることができるため、ユーザビリティ（使い勝手の良さ）の向上に役立ちます。


<style>
    @keyframes jumpWave {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    .dot {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 5px;
        background-color: #28a745;
        border-radius: 50%;
        /* 無限に繰り返す設定 */
        animation: jumpWave 1s infinite ease-in-out;
    }

    /* 待ち時間をズラして波を作る */
    .dot1 { animation-delay: 0s; }
    .dot2 { animation-delay: 0.2s; }
    .dot3 { animation-delay: 0.4s; }
</style>

<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<p>順番に跳ねることで波のような動きになります。</p>

ブラウザ表示

7. マイナスの値を指定する特殊なテクニック

animation-delayには、実は「マイナスの数字」を入れることもできます。例えば「-1s」と設定するとどうなるでしょうか？これは「すでに1秒前からアニメーションが始まっていたことにする」という面白い命令になります。

プラスの値を指定すると、最初は止まっていて後から動き出しますが、マイナスの値を指定すると、画面が表示された瞬間に「すでに途中まで動いた状態」からスタートします。これを使うと、ページを読み込んだ瞬間に全ての要素がリズムに乗って動いている状態を簡単に作ることができます。

初心者の方には少し高度に聞こえるかもしれませんが、「待ち時間をマイナスにすると、途中から再生されるんだな」と頭の片隅に置いておくだけで、表現の幅がぐっと広がります。無理に使う必要はありませんが、複雑なループアニメーションを作るときには非常に強力な武器になります。

8. 画像をパラパラ漫画のように順番に切り替える

次に、画像が順番にふわっと現れては消えるようなスライドショー風の演出を考えてみましょう。同じ場所に重ねた複数の画像に対して、全体の合計時間に合わせたディレイを設定します。これにより、一枚目が終わる頃に二枚目が始まり、二枚目が終わる頃に三枚目が始まる……というリレー形式の表示が可能になります。

画像を使った演出は、サイトのトップ画面などで非常に人気があります。サンプル画像を使って実際に試してみると、プログラミングの面白さがより実感できるはずです。HTMLの構造はシンプルにして、CSSで時間の管理をしっかり行うのが成功の秘訣です。


<style>
    @keyframes simpleFade {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }

    .slideshow-frame {
        position: relative;
        width: 150px;
        height: 100px;
    }

    .slideshow-frame img {
        position: absolute;
        top: 0;
        left: 0;
        animation: simpleFade 6s infinite;
        opacity: 0;
    }

    /* 6秒の動きの中で2秒ずつズラす */
    .img1 { animation-delay: 0s; }
    .img2 { animation-delay: 2s; }
    .img3 { animation-delay: 4s; }
</style>

<div class="slideshow-frame">
    <img src="/img/sample150-100.jpg" class="img1">
    <img src="/img/sample120-120.jpg" class="img2">
    <img src="/img/sample150-100.jpg" class="img3">
</div>
<p>画像が順番に入れ替わります。</p>

ブラウザ表示

9. 上手く動かない時のチェックポイント

コードを書いてみたけれど、思い通りに順番に動かない……。そんな時は、以下のポイントを確認してみてください。

半角英数字で書いているか： 「１ｓ」のように全角で書いてしまうと、コンピュータは理解できません。必ず「1s」と半角で書きましょう。
名前が一致しているか： 「@keyframes」で付けた名前と、「animation」で呼び出している名前が、大文字・小文字まで完全に合っているか確認してください。
animation属性の順番： 複数の命令を一行にまとめる場合、一般的に「時間、ディレイ時間」の順番で書く必要があります。逆に書くと待ち時間が反映されないことがあります。

これらはプロの現場でもよくあるミスです。動かないことに落ち込む必要はありません。一つずつ間違い探しをすること自体が、プログラミングの大切な学習過程なのです。

10. 動きのあるサイト作りで大切な「おもてなし」の心

今回は、animation-delayを活用して連続した動きを作る方法を学びました。大切なのは、単に動かすことではなく、サイトを訪れた人が「見やすい」「心地よい」と感じるリズムを作ることです。あまりに長い待ち時間を設定すると、ユーザーは「何も表示されないな？」と不安になってサイトを離れてしまうかもしれません。

ディレイの設定は、いわばサイトを訪れた人への「おもてなし」です。適切なスピードで、適切な順番に情報を提示してあげる。そのための手段として、この技術を磨いていってください。基礎をマスターしたあなたは、もう立派なウェブ制作者の一歩を踏み出しています。

まずは短い単語や簡単な図形から、自分だけのオリジナルアニメーションをたくさん作ってみてください。試行錯誤を繰り返すうちに、理想の動きを自由に表現できるようになります。クリエイティブな挑戦を楽しみながら、素敵なウェブサイトを目指しましょう！

2026年最新スキルアップ・実践セミナー