CSSアニメーションを完全ガイド！初心者でもわかる@keyframesの基本構文

1. CSSアニメーションとキーフレームとは？

1. CSSアニメーションとキーフレームとは？

ウェブサイトでボタンが光ったり、画像がゆらゆら揺れたりする動き。これらはCSSのアニメーションという機能で作られています。その中でも最も重要な役割を果たすのが@keyframes（キーフレーム）です。

プログラミング未経験でパソコンを触ったことがない方にも分かりやすく説明すると、キーフレームはアニメーションの「設計図」や「台本」のようなものです。「最初は左側にいて、半分経ったら右側に移動して、最後はまた左に戻る」といった一連の流れを記録しておく場所のことです。

この設計図さえしっかり作っておけば、あとはどのボタンや画像にその動きをさせるか指定するだけで、何度でも同じアニメーションを繰り返させることができます。動きのルールを定義するのがキーフレーム、実際に動かすのがアニメーションのプロパティだと覚えておきましょう。

2. アニメーションの台本を作る基本の書き方

2. アニメーションの台本を作る基本の書き方

キーフレームを書くときは、まず名付けから始めます。自分が作った動きに名前を付けることで、後で呼び出しやすくするためです。例えば「ふわふわ」という動きを作りたいなら、その名前を自由に決めることができます。

基本の構文は、@keyframes 動きの名前 { ... } という形になります。この「波かっこ（中かっこ）」の中に、具体的な動きのタイミングを書いていきます。もっともシンプルなのは、始まりの地点を表す「from（フロム）」と、終わりの地点を表す「to（トゥ）」を使う方法です。

例えば、背景の色が白から青に変わるアニメーションを作りたいなら、fromに白、toに青を指定します。パソコン操作に慣れていない方は、まずこの「どこから」「どこまで」という二つのポイントを決める練習から始めてみると良いでしょう。

<style>
    /* 「colorChange」という名前のアニメーション台本を作る */
    @keyframes colorChange {
        from {
            background-color: white; /* 始まりの色 */
        }
        to {
            background-color: skyblue; /* 終わりの色 */
        }
    }

    .box-sample {
        width: 150px;
        height: 100px;
        border: 2px solid #333;
        /* 台本を適用して3秒かけて動かす */
        animation: colorChange 3s infinite alternate;
    }
</style>

<div class="box-sample">色がじわじわ変わる</div>

3. パーセントを使って細かい動きを指定する方法

3. パーセントを使って細かい動きを指定する方法

「from」と「to」だけでは、二つの地点の動きしか作れませんが、もっと複雑な動きにしたいときはパーセント（%）を使います。これは、アニメーション全体の時間を「100」としたときに、どのタイミングでどんな状態にするかを指定する書き方です。

例えば、「0%（開始）」で左にいて、「50%（中間）」で大きく膨らみ、「100%（終了）」で元の位置に戻る、といった指定が可能です。0%から100%の間であれば、10%ごとでも25%ごとでも、好きなだけ細かく「キー（重要なポイント）」を追加することができます。

パラパラ漫画で例えるなら、10枚の紙があって、1枚目、5枚目、10枚目にだけ絵を描いて、その間はコンピュータに自動で埋めてもらうような感覚です。これを使いこなすと、非常に滑らかで生き生きとしたアニメーションが作れるようになります。

4. アニメーションの名前を決める時の注意点

4. アニメーションの名前を決める時の注意点

キーフレームに名前を付ける際（アニメーション名）、基本的にはアルファベットと数字を使います。日本語で名前を付けることも技術的には可能ですが、不具合を防ぐために「my-animation」や「fade-in」のように、英語で名前を付けるのが世界共通のルールになっています。

また、プログラムの世界では「大文字」と「小文字」を区別します。台本を「Move」という名前で作ったのに、呼び出すときに「move」と小文字で書いてしまうと、コンピュータは「そんな名前の台本はないよ」と迷ってしまいます。

パソコン初心者の方は、最初は「すべて小文字で、短い単語」を使って名前を付ける習慣をつけるとミスが減ります。自分がどんな動きを作ったのか一目でわかるような、シンプルな名前を考えてみてくださいね。

5. 作った台本を要素に適用するanimationプロパティ

5. 作った台本を要素に適用するanimationプロパティ

せっかくキーフレームで素晴らしい台本を作っても、それを特定の場所に「適用」しなければ動き出しません。ここで使うのがanimation（アニメーション）というプロパティです。これを使って、どの台本を、何秒かけて、どんな風に動かすかを指示します。

最低限必要なのは「名前」と「時間」の二つです。例えば「animation: fadein 2s;」と書けば、「fadein」という台本を2秒かけて一度だけ実行します。時間は「s（セカンド＝秒）」という単位で指定します。0.5秒なら「0.5s」と書きます。

何度も繰り返させたい場合は「infinite（インフィニット＝無限）」という言葉を付け足します。これを書かないと、アニメーションは一度動いて終わり、元の形に戻ってしまいます。広告のバナーがずっと点滅しているような動きは、この無限ループを使っているのです。

<style>
    /* 左右に揺れる台本 */
    @keyframes yurayura {
        0% { transform: translateX(0); }
        50% { transform: translateX(50px); }
        100% { transform: translateX(0); }
    }

    .ball {
        width: 50px;
        height: 50px;
        background-color: orange;
        border-radius: 50%;
        /* 動きの名前 時間 ループ設定 */
        animation: yurayura 2s infinite;
    }
</style>

<div class="ball"></div>

6. 動きの緩急をつけるタイミング関数

6. 動きの緩急をつけるタイミング関数

アニメーションをより自然に見せるために、動きの「緩急（かんきゅう）」を設定することができます。これをtiming-function（タイミング・ファンクション）と呼びます。ずっと一定の速さで動くのではなく、最初はゆっくり動き出して、最後はシュッと止まるような調整が可能です。

よく使われる設定には以下のものがあります。

• ease（イーズ）： 最初と最後をゆっくりにする（もっとも一般的）。
• linear（リニア）： ずっと一定の速さ。
• ease-in（イーズイン）： ゆっくり始まる。
• ease-out（イーズアウト）： ゆっくり終わる。

7. アニメーションを開始するタイミングを遅らせる設定

7. アニメーションを開始するタイミングを遅らせる設定

ページを開いた瞬間に一斉にアニメーションが始まるのではなく、少し時間を置いてから動かしたいこともあります。この待ち時間を設定するのがanimation-delay（アニメーション・ディレイ）です。ディレイとは日本語で「遅延（ちえん）」や「遅れ」を意味します。

例えば、三つの星の画像を順番に光らせたい場合、一つ目はすぐに、二つ目は1秒後、三つ目は2秒後、といった具合にこの設定を使います。これにより、動きにリズムが生まれ、物語のような演出ができるようになります。

パソコン初心者の方にイメージしてほしいのは、運動会の「ウェーブ」です。前の人が動いたのを見てから自分も動く、あの時間差をこの設定で作ることができます。複数の要素を動かすときは、ぜひこのディレイを活用してみてください。

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

    .heart {
        font-size: 50px;
        color: red;
        display: inline-block;
        /* 台本名 1秒かけて ループ 0.5秒待ってから開始 */
        animation: heartBeat 1s infinite 0.5s;
    }
</style>

<div class="heart">
    <i class="bi bi-heart-fill"></i>
</div>
<p>0.5秒遅れてから心臓が動き出します</p>

8. 動きの方向を逆再生させるテクニック

8. 動きの方向を逆再生させるテクニック

アニメーションを100%まで実行した後、また0%からやり直すのが通常の動きですが、100%から0%に向かって「逆戻り」させたい場合もあります。これを行うのがanimation-direction（アニメーション・ダイレクション）です。日本語では「方向」を意味します。

もっとも便利なのが「alternate（オルタネイト）」という設定です。これを使うと、「行きは普通に再生、帰りは逆再生」という動きを繰り返します。振り子時計のような往復運動を作りたいときに非常に役立ちます。一方向にワープして戻るよりも、ずっと滑らかで美しいループになります。

未経験の方は、まず「行きっぱなしにしない設定がある」ということだけ知っておきましょう。これ一つで、アニメーションの質が格段に上がります。以下のサンプルで、往復する動きを確認してみてください。

<style>
    @keyframes updown {
        from { transform: translateY(0); }
        to { transform: translateY(-30px); }
    }

    .icon-updown {
        font-size: 40px;
        color: #007bff;
        /* 台本名 0.8秒 無限 往復(alternate) */
        animation: updown 0.8s infinite alternate;
    }
</style>

<div class="icon-updown">
    <i class="bi bi-arrow-up-circle-fill"></i>
</div>
<p>ピョコピョコ上下に跳ねます</p>

9. アニメーションが動かない時に確認すること

9. アニメーションが動かない時に確認すること

一生懸命コードを書いたのに動かない！そんなときは、初心者が陥りやすい三つのポイントをチェックしましょう。一つ目は、キーフレームの名前と適用する際の名前が一致しているかです。一文字でも違うと動きません。

二つ目は、時間の単位「s」を忘れていないかです。「animation: move 2;」のように数字だけ書くと、コンピュータは「2ミリ秒なのか、2秒なのか」判断できず、動くのをやめてしまいます。必ず「2s」のように単位をつけましょう。

三つ目は、キーフレームの書き出しにある「@」マークを忘れていないか、また「{}（波かっこ）」が正しく閉じられているかです。これらはプログラムのルールとして厳格に決まっています。一見難しそうですが、間違い探しをするような気持ちでコードを見直してみると、意外と簡単なミスが見つかるはずです。

10. キーフレームをマスターして表現を広げよう

10. キーフレームをマスターして表現を広げよう

キーフレームは、ウェブデザインにおいて無限の可能性を持っています。最初は単純な色の変化や移動から始めて、慣れてきたら回転や拡大、透明度の変化などを組み合わせてみてください。自分が想像した通りに画面上のパーツが動き出す瞬間は、最高の感動を味わえます。

パソコンを触ったことがない方でも、一つ一つの英単語にはちゃんと「動き」や「時間」という意味が込められています。その意味を理解しながら書いていけば、プログラムは決して怖いものではありません。むしろ、自分のアイデアを形にするための素晴らしいツールになります。

まずはこの基本の形を何度も書いて、手がコードを覚えるまで練習してみましょう。動きのあるサイトは、見ている人を飽きさせず、ワクワクさせてくれます。あなただけの素敵なアニメーションを、ぜひ作ってみてくださいね！