CSSアニメーションの基本をマスター！name・duration・delay・iterationの使い方

animation-name・duration・delay・iterationの基本指定方法

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

生徒

「CSSで作ったアニメーションに名前を付けたり、動く時間を細かく設定したりする方法はありますか？」

先生

「はい、animation専用のプロパティを使えば、動きの種類、時間、待ち時間、繰り返す回数を自由にコントロールできますよ。」

生徒

「なんだか難しそうな単語が並んでいますが、私にも使いこなせるでしょうか？」

先生

「大丈夫です！一つずつ役割を整理していけば、とってもシンプルです。それでは、基本的な指定方法を見ていきましょう！」

1. CSSアニメーションを制御する4つの重要項目とは？

CSSで図形や文字を動かすとき、ただ「動け！」と命じるだけではコンピュータは困ってしまいます。そこで、細かい指示を出すために必要なのが、今回学習する4つの設定項目です。これらは、アニメーションの「名前」「長さ」「開始時間」「回数」を決定する役割を持っています。

プログラミング未経験でパソコンを触ったことがない方にも分かりやすく例えると、これは「演劇のステージ」のようなものです。どの劇を演じるのか（名前）、劇の長さは何分か（長さ）、開演まで何分待つか（開始時間）、何回公演を行うか（回数）を事前に決めるのと全く同じ仕組みです。

これらの設定を一つずつ指定していくことで、ウェブサイト上のボタンをふわふわさせたり、画像をキラキラさせたりといった演出が自由自在になります。まずはそれぞれの名前を覚えるところからスタートしましょう。難しい横文字が出てきますが、一つ一つ丁寧に解説していきますね。

2. アニメーションの名前を指定するanimation-name

一番最初に行うのが、実行したいアニメーションに名前を付ける作業です。これにはanimation-name（アニメーション・ネーム）というプロパティを使います。別の場所で作成した動き（キーフレーム）の名前を、ここで指定して呼び出します。

例えば、空に浮かぶ雲のようにフワフワした動きを作ったなら、その動きに「fuwafuwa」という名前を付けます。そして、動かしたい雲の画像に対して「animation-name: fuwafuwa;」と指示を出します。これで、コンピュータは「あ、この画像にはあのフワフワの台本を使うんだな」と理解してくれます。

名前はアルファベットで自由に付けることができますが、誰が見てもどんな動きか分かる名前にするのがコツです。「ugoki1」とするよりも「slide-in」とした方が、横からスッと入ってくる動きだと分かりやすいですよね。こうした小さな工夫が、後々の作業を楽にしてくれます。


<style>
    /* アニメーションの動きを定義 */
    @keyframes simple-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .fade-box {
        width: 150px;
        height: 100px;
        background-color: #ff5722;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        /* ここで名前を指定 */
        animation-name: simple-fade;
        /* 時間も指定しないと動かないので注意 */
        animation-duration: 3s;
    }
</style>

<div class="fade-box">ふわっと登場</div>

ブラウザ表示

3. 動きの長さを決めるanimation-duration

アニメーションの名前が決まったら、次はどれくらいの時間をかけて動かすかを決めます。これにはanimation-duration（アニメーション・デュレーション）を使います。デュレーションとは日本語で「期間」や「持続時間」という意味です。

指定の仕方はとても簡単で、数字に「s（秒）」を付けて書きます。3秒かけて動かしたいなら「3s」、0.5秒なら「0.5s」となります。1秒より短い時間を指定するときは、小数の書き方に注意しましょう。パソコンに慣れていない方は、まず「1s」や「2s」といった整数から試してみるのがおすすめです。

この数値を変えるだけで、同じ動きでも印象がガラリと変わります。ゆっくり動かせば優雅で丁寧な印象になりますし、素早く動かせば元気でキビキビした印象になります。サイトの雰囲気に合わせて、ちょうどいい秒数を見つけてみてください。

4. 動き出すまでの待ち時間を作るanimation-delay

ページが表示された瞬間に動くのではなく、少し経ってから動き出させたい場合がありますよね。そんな時に使うのがanimation-delay（アニメーション・ディレイ）です。ディレイとは「遅延（ちえん）」、つまり「後回しにする」という意味の言葉です。

例えば「animation-delay: 2s;」と設定すると、画面が表示されてから2秒間じっと待機し、その後にアニメーションが開始されます。これを使うと、複数の文字を順番にふわっと表示させるような、物語性のある演出が可能になります。

「一つ目が表示されてから、次に二つ目がくる」といったリズムを作れるようになると、サイトを訪れた人をワクワクさせることができます。待ち時間を1秒、2秒、3秒とずらして設定するだけで、プロのようなウェーブ効果も作れますよ。


<style>
    @keyframes slide-right {
        from { transform: translateX(0); }
        to { transform: translateX(100px); }
    }

    .delay-ball {
        width: 60px;
        height: 60px;
        background-color: #4caf50;
        border-radius: 50%;
        animation-name: slide-right;
        animation-duration: 2s;
        /* 1.5秒待ってから動き出す */
        animation-delay: 1.5s;
        /* 動き終わった後の形を維持する設定 */
        animation-fill-mode: forwards;
    }
</style>

<div class="delay-ball"></div>
<p>画面が出てから1.5秒後に右へ転がります</p>

ブラウザ表示

5. 何回繰り返すかを指定するanimation-iteration-count

アニメーションを1回だけやって終わるのか、それとも何度も繰り返すのかを調整するのがanimation-iteration-count（アニメーション・イテレーション・カウント）です。イテレーションとは「反復（はんぷく）」や「繰り返し」という意味です。

回数を数字で指定することができます。例えば「2」と書けば、アニメーションを2回繰り返して止まります。もっともよく使われるのは「ずっと繰り返してほしい」という指定で、この場合は「infinite（インフィニット）」という言葉を使います。インフィニットは日本語で「無限」という意味です。

ずっとチカチカ光るボタンや、常に揺れているアイコンなど、注目を集めたい要素にはこの無限ループの設定がよく使われます。逆に、最初の一回だけ印象付けたいときは数字の「1」を指定（または省略）しましょう。サイトの目的によって、繰り返しの回数を使い分けるのが上級者への近道です。

6. animationの基本的な書き方のマナーとコツ

ここまで4つの項目を見てきましたが、これらを指定する際には順番や書き方のマナーがあります。CSSではそれぞれの項目をバラバラに書くこともできますが、慣れてくると「animation: 名前時間待ち時間回数;」のように一行にまとめて書くこともできるようになります。

しかし、パソコン初心者の方は、まずは面倒でも一行ずつ「animation-name: 〇〇;」「animation-duration: 〇〇;」と書いていくことを強くおすすめします。なぜなら、その方がミスをしたときにどこが間違っているか見つけやすいからです。

また、命令の最後には必ず「セミコロン（;）」を付けるのを忘れないでください。これは日本語の文章でいう「句読点（。）」のようなもので、コンピュータに「ここで命令は終わりですよ」と伝える大切な印です。これを忘れると、せっかくのアニメーションが動かなくなってしまいます。


<style>
    @keyframes heart-beat {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }

    .heart-icon {
        font-size: 50px;
        color: #e91e63;
        display: inline-block;
        /* 一つずつ丁寧に指定する書き方 */
        animation-name: heart-beat;
        animation-duration: 1s;
        animation-iteration-count: infinite; /* 無限に繰り返す */
    }
</style>

<div class="heart-icon">
    <i class="bi bi-suit-heart-fill"></i>
</div>
<p>ドキドキと無限に鼓動し続けます</p>

ブラウザ表示

7. 単位を正しく理解しよう！秒（s）とミリ秒（ms）

時間の指定に使う単位についても詳しく見ていきましょう。基本的には「s（秒）」を使いますが、実は「ms（ミリ秒）」というもっと細かい単位も存在します。1000ミリ秒が1秒です。つまり、500msは0.5秒と同じ意味になります。

プログラミングの世界では、非常に素早い動き（ボタンを押した瞬間のわずかな変化など）を表現するときにミリ秒を使うことがあります。しかし、初心者のうちは「s（秒）」だけで十分です。0.1秒単位で調整したいときは「0.1s」や「0.8s」といった小数を使えば、直感的に時間を管理できます。

「s」を付け忘れるのは、初心者の方がもっともよくやるミスのナンバーワンです。数字だけを書いてもコンピュータはそれが「時間」だと認識してくれません。必ず最後に「s」が添えられているか、指差し確認をする癖をつけましょう。

8. 複数のアニメーションを同時に動かす応用テクニック

一つの図形に対して、二つの異なるアニメーションを同時に実行させることも可能です。例えば「右に移動しながら、徐々に透明になる」といった複雑な動きです。これは、プロパティの値をカンマ（,）で区切って指定することで実現できます。

例えば「animation-name: move, fade;」のように書きます。こうすることで、二つの異なる台本を同時に読み込んで、リッチなアニメーションを作り出すことができます。もちろん、それぞれの動きに対して別々の時間（duration）や待ち時間（delay）を設定することも可能です。

こうした応用ができるようになると、ウェブデザインの幅がぐっと広がります。最初は一つの動きを完璧にすることを目指し、慣れてきたら二つの動きを組み合わせて、自分だけの特別な演出に挑戦してみてください。


<style>
    @keyframes rotate-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    @keyframes color-blink {
        0% { background-color: #3f51b5; }
        50% { background-color: #00bcd4; }
        100% { background-color: #3f51b5; }
    }

    .multi-box {
        width: 100px;
        height: 100px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 二つの台本を同時に実行 */
        animation-name: rotate-slow, color-blink;
        animation-duration: 4s, 2s;
        animation-iteration-count: infinite, infinite;
    }
</style>

<div class="multi-box">回転＆点滅</div>

ブラウザ表示