この記事の要点

animation-name は要素に適用する @keyframes 規則の名前を指定する CSS プロパティ 値はカンマ区切りで複数のアニメーションを同時に適用できる none を指定するとアニメーションが無効になる（一時停止ではなく無効化） 名前は @keyframes の名前と完全一致している必要がある（大文字小文字も区別） 実務では animation ショートハンドにまとめて書くことが多い

animation-name プロパティとは

animation-name は、要素に適用する @keyframes アニメーション規則の名前を指定する CSS プロパティです。@keyframes で定義した一連のキーフレームを「どのアニメーションを再生するか」という形で要素に紐づけます。

基本構文

セレクタ {
  animation-name: 識別子 | none | カンマ区切り複数;
}

/* 例 */
.box   { animation-name: fade-in; }
.multi { animation-name: fade-in, slide-up; }
.stop  { animation-name: none; }

@keyframes と animation-name の関係

animation-name 単体ではアニメーションは動きません。必ず対応する @keyframes 規則とセットで使います。

/* キーフレームを定義 */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 要素にアニメーションを適用 */
.box {
  animation-name: fade-in;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

animation-name の値は、@keyframes の直後に書いた識別子と完全一致している必要があります。大文字小文字、ハイフンの有無もすべて区別されます。

指定できる値

値	意味
none	アニメーションなし（既定値）。一時停止ではなく完全に無効化
識別子（例: fade-in）	同名の @keyframes 規則を適用
カンマ区切り複数	複数のアニメーションを同時適用

複数アニメーションの同時適用

カンマで区切って複数の @keyframes を一度に適用できます。animation-duration や animation-delay など他のプロパティも同じ順序で対応します。

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-up {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

.banner {
  animation-name:     fade-in,   slide-up;
  animation-duration: 0.6s,      0.8s;
  animation-delay:    0s,        0.2s;
  animation-fill-mode: forwards;
}

個数が一致しない場合、足りない値は繰り返しで補われます。たとえば animation-name が 2 個で animation-duration が 1 個なら、両方とも同じ duration になります。

animation ショートハンドとの関係

実務では個別プロパティではなく animation ショートハンドにまとめて書くことが圧倒的に多いです。順序は問わずパースされますが、慣習として name を後ろに置く書き方が一般的です。

/* ショートハンド */
.box {
  animation: 0.8s ease-out 0.2s 1 forwards fade-in;
  /*         duration timing delay count fill name */
}

/* 個別指定（上と同じ） */
.box {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-name: fade-in;
}

命名規則とハマりどころ

注意点	解説
大文字小文字を区別	fadeIn と fadein は別物として扱われる
CSS 予約語と衝突しない名前	none や initial、inherit はキーフレーム名として使えない
動的生成時の typo	JS で element.style.animationName = '...' する際、文字列の typo に気付きにくい
スコープなし（グローバル）	@keyframes はすべてグローバルスコープなので、同名定義が後勝ちで上書きされる

none の使いどころ

animation-name: none は「アニメーションを止める」のではなく「適用しない」です。再生途中で none にすると、現在の状態を保持せず即座にリセットされます。

@media (prefers-reduced-motion: reduce) {
  /* モーション低減設定時はアニメーションを一括無効化 */
  .anim {
    animation-name: none;
  }
}

アクセシビリティ対応として、ユーザーが「視覚効果を減らす」設定をしているときにアニメーションを止める用途で重宝します。

JavaScript から動的に切り替える

// アニメーション開始
element.style.animationName = 'fade-in';

// アニメーション停止（リセット）
element.style.animationName = 'none';

// 一旦リセットして再生
element.style.animationName = 'none';
void element.offsetWidth; // 強制リフロー
element.style.animationName = 'fade-in';

「同じアニメーションを再生し直したい」場合、一度 none にしてリフローを挟まないと再生されないのは有名な手筋です。

animation-play-state との違い

プロパティ	役割
animation-name	どのアニメーションを適用するか（無効化は none）
animation-play-state	再生中の進行を一時停止 / 再開（paused / running）

進行を保ったまま止めたいなら animation-play-state: paused、完全に無効化したいなら animation-name: none と使い分けます。

よくあるトラブル

症状	原因と対処
動かない	@keyframes 未定義 / 名前 typo / animation-duration 未指定（既定 0s）
最後の状態が消える	animation-fill-mode: forwards を指定
2 回目が再生されない	動的に none → 名前 を切り替えてリフローを挟む
同名の @keyframes が複数	後に書いたものが勝つ。CSS モジュール / Scoped CSS で衝突回避

FAQ

Q: 名前にハイフンや日本語は使える？
A: ハイフンや数字は使えます（先頭は文字）。日本語も技術的には可能ですが、可読性とツール互換性のため英数 + ハイフンが無難です。

Q: 同じアニメーションを 2 つの要素で使い回せる？
A: 可能です。@keyframes はグローバルなので、複数の要素から同じ名前で参照できます。

Q: transition との違いは？
A: transition は状態変化時に補間するだけで時間軸を持ちません。animation は @keyframes でタイムラインを定義し、繰り返しや fill-mode を制御できます。

関連

• アニメーション — 親カテゴリ
• @keyframes — キーフレーム定義
• animation-duration / animation-timing-function / animation-delay
• animation-iteration-count / animation-fill-mode / animation-play-state
• animation ショートハンド