【CSS】animationを一括指定でまとめて書く方法とサンプルコード

CSSでアニメーションを作るとき、animationプロパティには多くの指定項目があります。
それぞれを個別に書くこともできますが、まとめて1行で指定する「一括指定」を使うと、コードをすっきり整理できます。
この記事では、animationプロパティの一括指定の書き方と各値の意味を、背景色が変化するシンプルなサンプルを使って解説します。

サンプルコードの動作をチェック
サンプルコード
解説
1. 同じ意味を「1つずつ指定」した場合

サンプルコードの動作をチェック

四角の上にマウスを乗せると
色が次々に変わります👇

サンプルコード

HTML

<body>
  <div class="changeArea"></div>
</body>

CSS

.changeArea {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 3px solid #999999;
  background-color: #ffffff;
}

.changeArea:hover {
  /* animation: 名前 時間 イージング 遅延 回数 方向 再生後の状態 */
  animation: changeColor 3s ease 1s infinite alternate forwards;
}

@keyframes changeColor {
  0% {
    background-color: #ffffff;
  }
  20% {
    background-color: #000000;
  }
  40% {
    background-color: #ff0000;
  }
  60% {
    background-color: #00ff00;
  }
  80% {
    background-color: #ffff00;
  }
  100% {
    background-color: #0000ff;
  }
}

解説

.changeArea {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 3px solid #999999;
  background-color: #ffffff;
}

アニメーションを適用する四角い領域を作っています。
幅と高さを200pxに指定し、中央寄せ（margin: 0 auto;）にしています。
背景色は最初に白（#ffffff）で表示されます。

.changeArea:hover {
  animation: changeColor 3s ease 1s infinite alternate forwards;
  /* 3s は3秒、1s は1秒の意味 */
}

マウスを乗せたときにアニメーションが始まります。
ここで使われている animation プロパティが「一括指定」です。

これは次の7つの値をまとめて指定しています。

指定内容	意味
`changeColor`	アニメーション名（@keyframesで定義した名前）
`3s`	1回の再生にかかる時間
`ease`	動き方（イージング）
`1s`	開始までの遅延時間
`infinite`	無限に繰り返す
`alternate`	交互に再生（行き→戻り）
`forwards`	終了後に最後の状態を保持

同じ意味を「1つずつ指定」した場合

.changeArea:hover {
  animation-name: changeColor;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

上記の書き方でもまったく同じ動作になります。
これらのプロパティをまとめて1行で書けるのが、animation プロパティの「一括指定」です。

今回は infinite（無限ループ）のため、forwards の効果は実際にはありません。
ただし一括指定で使える要素をすべて含める学習用サンプルとして記載しています。

@keyframes changeColor {
  0%   { background-color: #ffffff; }  /* 白 */
  20%  { background-color: #000000; }  /* 黒 */
  40%  { background-color: #ff0000; }  /* 赤 */
  60%  { background-color: #00ff00; }  /* 緑 */
  80%  { background-color: #ffff00; }  /* 黄 */
  100% { background-color: #0000ff; }  /* 青 */
}

アニメーションの内容を定義しています。
時間の経過に応じて背景色を変化させています。

0%から100%までの間で、順番に色が切り替わっていきます。
alternate を指定しているので、1回再生したあとに逆向きで再生されます。

このコードでは、animation プロパティを使ってアニメーションを一括指定しています。
個別に書くより短くなり、複数の値をまとめて管理できるのが特徴です。

CSSアニメーションについて詳しく👇