【CSS】「animation」プロパティの使い方！【一括指定プロパティ】

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

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

「animation」を使うと、アニメーションに関するプロパティに「一括で値をセット」することができます。

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

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

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

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

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

「animation」プロパティを使うと何ができるのか？

<div class="container">
    <div class="box "></div>
</div>

.container {
    width: 1000px;
    margin: 100px auto;
}
.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    /* animation-name: width, height;
    animation-duration: 2s;
    animation-iteration-count: 2;
    animation-direction: alternate; */
    animation: 2s 2 alternate width,
               2s 2 alternate height;
}
@keyframes width {
    0% {
        width: 100px;
    }
    100% {
        width: 100%;
    }
}
@keyframes height {
    0% {
        height: 100px;
    }
    30% {
        height: 300px;
    }
    100% {
        height: 100px;
    }
}

「animation」プロパティを使うと「アニメーション関連のプロパティ」に「一括で値をセット」することができます！

つまり「animation」は一括指定プロパティということですね。

「animation」プロパティを積極的に使うことでコードがスッキリと書けます。どんどん一括指定していきましょう！！

なるほどね！

「animation」で一括指定できるプロパティにはどのようなものがあるのか？

「animation」で一括指定できるプロパティは下記の通りです！

• animation-name
• animation-duration
• animation- iteration-count
• animation-direction
• animation-delay
• animation-play-state
• animation-fill-mode
• animation-timing-function

これらがあります！

それぞれの個別のプロパティの使い方は！

それぞれの個別のプロパティの使い方は、僕が下記の記事で丁寧に解説していますので、もし気になる方はこちらからどうぞ！

やったあ！これで詳しくなれるね！

「animation」プロパティの使い方！

それでは「animation」プロパティの使い方をまとめていきますね！

「半角空白区切り」でそれぞれのプロパティの値を書けばOK！

.box {
    animation: 2s 2 alternate width;
}

「animation」プロパティには「半角空白区切り」でそれぞれの一括指定するプロパティにセットする値を書けばOKです。

順番は「基本的に」何でもOKです。ですが時間を表す値を取るプロパティには特別なルールがあるのでそれについては後述します。

すべての値は「オプション」である

「animation」で一括指定できるそれぞれのプロパティの値は、すべてオプションになります。

つまり省略することが可能ということです。

省略した場合は、そのプロパティの初期値が入ってくるので注意してください。

それぞれのプロパティの初期値！

値を省略した時に入ってくるそれぞれのプロパティの初期値は下記の通りです！

• animation-name　「none」
• animation-duration　「0s」
• animation- iteration-count　「1」
• animation-direction　「normal」
• animation-delay　「0s」
• animation-play-state　「running」
• animation-fill-mode　「none」
• animation-timing-function　「ease」

これらがそれぞれのプロパティの「初期値」になります。

「animation-name」と「animation-duration」の指定は重要！

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

「animation-name」と「animation-duration」の指定は重要です。

これらのプロパティに値をセットしないと、実質、アニメーションが上手く機能してないようになってしまうので、これらのプロパティには必ず何らかの指定を行ってください。

これらの指定をすると最低限のアニメーションをつけることができます。

「animation-duration」と「animation-delay」の値の区別！

.box {
    animation: 2s 4s width;
}

「animation-duration」と「animation-delay」にはどちらも「時間」を表す値が入ってきますので、それらを区別するために特別なルールが設けられています。

最初に指定した方の値が「animation-duration」の値として解釈されます。

そして次に指定された値が「animation-delay」の値として使われます。

さらに、もし１つしか値がなければ、「animation-duration」の指定だけである、と解釈されます。

「animation-delay」の値が「4s」というように解釈される、ということになりますね。

「animation-name」の値は最後に指定するといいかも！

.box {
    animation: 2s 2 alternate width;
}

もし「animation-name」の値が「他のプロパティの入り得る値」であった場合、まずは「他のプロパティの値」であると解釈されます。

なので、「animation-name」の値は最後に指定することで、ミスが減ると考えられています。

だから慣習的にも、意味を理解するためにも、「animation-name」の指定は最後にするといいかもです！

「カンマ区切り」で複数のアニメーションの指定ができる！

.box {
    animation: 2s 2 alternate width,
    2s infinite normal width;
}

「animation」プロパティに「カンマ区切り」で複数の指定を書くことで、複数のアニメーションをつけることができます。

上の例のように、お好みで改行を入れてあげてもいいかもですね！

参考リンク！

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

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

おすすめの再生リスト！

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

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

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

まとめ！

「animation」プロパティを使うと「アニメーション関連のプロパティ」に「一括で値をセット」することができる！

「animation」で一括指定できるプロパティは下記の通りです！

• animation-name
• animation-duration
• animation- iteration-count
• animation-direction
• animation-delay
• animation-play-state
• animation-fill-mode
• animation-timing-function

「半角空白区切り」でそれぞれのプロパティの値を書けばOK！

すべての値は「オプション」である。

値を省略した時に入ってくるそれぞれのプロパティの初期値は下記の通りです！

• animation-name　「none」
• animation-duration　「0s」
• animation- iteration-count　「1」
• animation-direction　「normal」
• animation-delay　「0s」
• animation-play-state　「running」
• animation-fill-mode　「none」
• animation-timing-function　「ease」

「animation-name」と「animation-duration」の指定は重要！

「animation-duration」と「animation-delay」の値の区別！

「animation-name」の値は最後に指定するといいかも！

「カンマ区切り」で複数のアニメーションの指定ができる！

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

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

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

ではまた！