【CSS】「animation-name」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「animation-name」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「animation-name」を使うと、「@keyframes」で定義したアニメーションを任意の要素に適用することができます。とても重要なプロパティです。

また、下の動画でもCSSの「animation-name」プロパティの使い方ついて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「animation-name」プロパティは「@keyframes」と一緒に使われる。

「animation-name」プロパティは単体で使うのではなく「@keyframes」を使ったアニメーションの定義と一緒に使われます。

なのでもし「@keyframes」の使い方がいまいち分からないという方は下記の記事で詳しくまとめているので、こちらも一緒に読んでみてください！

「animation-name」を使うと何ができるのか？

@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 900px;
    }
}
.box {
    animation-name: width;
    animation-duration: 2s;
}

「animation-name」を使うと「@keyframes」で定義したアニメーションを任意の要素に適用することができます。

ふむふむ！

「animation-name」の使い方！

「animation-name」の使い方をまとめていきます！

「@keyframes」で作った「アニメーションの名前」を書いてあげればOK！

@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 900px;
    }
}
.box {
    animation-name: width;
    animation-duration: 2s;
}

上のコードでは「@keyframes」を使って「width 」という名前のアニメーションを作成しました。

その作ったアニメーションを適用したい要素の「animation-name」プロパティの値に「アニメーションの名前」を書いてあげればOKです。

このように名前を書いてあげることでアニメーションを要素に適用することができます！

「none」というキーワードも使える

.box {
    animation-name: none;
}

「none」というキーワードを使うと「アニメーションを何も適用しない」という指定ができます。

これが初期値です。

なので特に「animation-name」に何か指定しなければ、アニメーションは何も適用されません。

「カンマ区切り」で「複数の値」も書ける

.box {
    animation-name: width, slide;
}

「animation-name」には「カンマ区切り」で複数の値を書くこともできます。

その場合は１つの要素に複数のアニメーションをつけることができます。

「animation-name」に「カンマ区切り」で「複数の値」を書いた時の挙動

「animation-name」に「カンマ区切り」で「複数の値」を書くことで、複数のアニメーションをつけることができます。

そしてこれは他の「animation-*」のプロパティの指定に影響を与えることになるので、そこについてここで詳しくまとめておこうと思います。

順番が対応する

.box {
    animation-name: width, slide;
    animation-duration: 1s, 2s;
}

「animation-name」に複数の値を書いた場合、他の「animation系」のプロパティは「animation-name」に書かれた順番で指定することになります。

上の例だと、１番目に「width」で２番目に「slide」という値が書かれていますよね。なので他の「animation-duration」などのプロパティも１番目に書いた指定は「width」に対応して、２番目に書いた指定は「slide」に対応するという形になります。

なので、「width」には「1s」が入ってきて、

「slide」には「2s」が入るというような感じですね。

このように他の「animation系」のプロパティの値をアニメーションごとに分けて指定することが可能となります！

なるほどね！

他の「animation系」のプロパティの値の数が少ない場合

.box {
    animation-name: width, slide, rotate;
    animation-duration: 1s, 2s;
}

他の「animation系」のプロパティの値の数が「animation-name」の値の数よりも少ない場合は、同じ値が順番に繰り返し使われます。

上の例だと、「width」には「1s」が入り、

「slide」には「2s」が入り、

「rotate」には「1s」が入る、、。

という感じです。

このように他の「animation系」のプロパティの値の数が「animation-name」の値の数よりも少ない場合は、他の「animation系」のプロパティの値が順番に繰り返されて使われるので、このような挙動についても押さえておいてください。

もう１つ例を挙げると、「animation-duration」の値が１つしかないのならその値が全てのアニメーションに使いまわされる、という感じになりますね。

他の「animation系」のプロパティの値の数が多い場合

.box {
    animation-name: width, slide, rotate;
    animation-duration: 1s, 2s, 3s, 4s;
}

他の「animation系」のプロパティの値の数が「animation-name」の値の数よりも多い場合は、あまった他の「animation系」のプロパティの値は切り捨てられます。

上の例だと、「width」には「1s」が入り、

「slide」には「2s」が入り、

「rotate」には「3s」が入り、

「4s」という値はどのアニメーションにも使われません。ですが、もし４つ目のアニメションが追加された場合は、そこに使われることになります。

参考リンク！

仕様書。
https://drafts.csswg.org/css-animations/#animation-name

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-name

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「animation-name」プロパティは「@keyframes」と一緒に使われる。

「animation-name」を使うと「@keyframes」で定義したアニメーションを任意の要素に適用することができる。

「@keyframes」で作った「アニメーションの名前」を書いてあげればOK！

「none」というキーワードも使える。これが初期値。

「カンマ区切り」で「複数の値」も書ける。

「animation-name」に複数の値を書いた場合、他の「animation系」のプロパティは「animation-name」に書かれた順番で指定することになる。

他の「animation系」のプロパティの値の数が「animation-name」の値の数よりも少ない場合は、同じ値が順番に繰り返し使われる。

他の「animation系」のプロパティの値の数が「animation-name」の値の数よりも多い場合は、あまった他の「animation系」のプロパティの値は切り捨てられる。

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「animation-name」プロパティの使い方ついて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！