Chapter 02無料公開

@keyframes について

7968
7968
2021.07.18に更新

@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できる CSS の文法です。
@keyframes は、@規則 のため、@ から始まり、波括弧内に記述します。
下記ように記述します。

CSS(@keyframes の記述例)
@keyframes 任意の名前 {
    0% {
        CSSプロパティ:;
    }
    100% {
        CSSプロパティ:;
    }
}

@keyframes の後に任意でアニメーションの名前を決められます。
例えば、横幅が拡大するアニメーションなら sizeScale 、フェードインするアニメーションなら fadeIn のように、アニメーションの名前を任意で決めてください。
0% はアニメーション開始時を表しており、100% はアニメーション終了時を表しています。
その波括弧の中にCSSプロパティを記述して、アニメーションを指定します。

@keyframes は簡単なので、実例を見ながら、どのように記述するのか見ていきましょう。

@keyframes の記述例
@keyframes sizeScale {
    0% {
        width:200px;
    }
    100% {
        width:300px;
    }
}

この場合は、アニメーション開始時に width:200px の横幅からはじまり、アニメーション終了時には width:300px になります。

アニメーション開始時の横幅は特に指定せずに、終了時だけ width:300px にしたい場合は下記のようになります。

@keyframes の記述例
@keyframes sizeScale {
    100% {
        width:300px;
    }
}

100% だけ指定すれば、終了時だけを指定したアニメーションになります。
お気づきかと思いますが、0% と 100% の記述は必須ではありません。

次は、アニメーションの途中で横幅を 400px にして、終了時には 300px になるように記述してみましょう。

@keyframes の記述例
@keyframes sizeScale {
    50% {
        width:400px;
    }
    100% {
        width:300px;
    }
}

この場合は、アニメーションの途中(半分)で横幅が 400px になり、終了時には 300px になります。
アニメーションの開始から終了までの経過を 0% から 100% で指定できます。

次は、不透明度を変更してみましょう。
opacity プロパティを使うことで、不透明度の指定ができます。
opacity プロパティの値に 0 を指定すると透明になり、1 を指定すると不透明になります。
アニメーション開始時は透明で、終了時には不透明になるように記述してみましょう。

@keyframes の記述例
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

横幅の大きさを変えたときと同じような記述なので、簡単ですね。

さらに横幅も変更してみましょう。

@keyframes の記述例
@keyframes fadeIn {
    0% {
        opacity:0;
        width:200px;
    }
    100% {
        opacity:1;
        width:400px;
    }
}

アニメーション開始時は、横幅が 200px で透明なため、何も表示されませんが、アニメーション終了時には、横幅が 400px になり、表示されるようになります。

ご覧のように width や opacity などの CSS プロパティを記述することで、拡大・縮小、透明・不透明など様々なアニメーションを指定できます。

今まで、アニメーション開始時を 0% 、アニメーション終了時を 100% と記述していましたが、from と to と記述することもできます。
from は 0% を表し、to は 100% を表します。
下記の 2 つは同じ意味です。

@keyframes の記述例
@keyframes sizeScale1 {
    0% {
        width:200px;
    }
    100% {
        width:400px;
    }
}

@keyframes sizeScale2 {
    from {
        width:200px;
    }
    to {
        width:400px;
    }
}

ここまで見てきて、2 つ疑問があると思います。

  • @keyframes で指定したアニメーションは、どこに適用されるのか?
  • アニメーション開始から終了までの時間はどこで指定するのか?

これらは、animation プロパティで指定します。
@keyframes では開始から終了までのアニメーションを指定しました。
animation プロパティでは、どのアニメーションを適用するのか、適用したアニメーションはいつ開始されるのか、開始されてから終了するまでの時間、アニメーションの繰り返し回数などを指定することができます。

このように、@keyframes ではアニメーションのみを指定し、animation プロパティでは適用するアニメーションの種類やアニメーションの時間などを指定します。
なぜ、別々なの?という疑問もあるかと思います。
例えば、不透明度を徐々に上げてフェードインするアニメーションを @keyframes で指定したとします。
先ほども記述しましたが、下記のように指定します。

@keyframes の記述例
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes ではフェードインするというアニメーションのみ指定しています。
例えば、h1 の要素は 3 秒でフェードインして h2 の要素は 5 秒でフェードインしたい場合でも、フェードインするアニメーションの記述は一つで済みます。
別々になっているため、 h1 , h2 ごとにアニメーション( @keyframes )を記述する必要はありません。
同じアニメーションなら、@keyframes を 1 つ記述しておけば、使い回しができます。

次は animation プロパティを見ていきましょう。