過去バージョン

animation-duration とは

animation-duration は CSS アニメーションにおいて、1 サイクル（@keyframes の 0% から 100% まで）にかかる時間を指定するプロパティです。これを 0s（初期値）のままにすると、どんなに豪華な @keyframes を書いてもアニメーションは再生されません。

構文

animation-duration: <time> [, <time>]*;

/* 例 */
animation-duration: 2s;
animation-duration: 500ms;
animation-duration: 2s, 1.5s;   /* 複数のアニメーションに対応 */

指定できる単位

単位を省略するとパースエラーになり、プロパティ全体が無効になります（2 や 0 単独はダメ。必ず 2s や 0s と書く）。

基本例 — フェードイン

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.target {
  animation-name: fadeIn;
  animation-duration: 1.2s;          /* 1.2 秒かけてフェードイン */
  animation-fill-mode: forwards;
}

複数アニメーションを別々の時間で動かす

animation-name をカンマ区切りで複数指定したとき、animation-duration も同じ順で並べると個別に時間を割り当てられます。

.box {
  animation-name: fadeIn, slide;
  animation-duration: 1s, 2s;       /* fadeIn は 1s、slide は 2s */
}

個数が合わないと、足りない方は巡回（繰り返し）して適用されます。例えば名前 3 つに対して時間 2 つだと 1s, 2s, 1s として扱われます。

0s と負の値

※ animation-delay は負の値が有効（“途中から再生開始”の意味）ですが、animation-duration の負値は無効です。混同しやすいので注意。

animation 一括指定との関係

animation ショートハンドの中では、最初に出てきた 値が duration、2 番目が animation-delay と解釈されます。

/* 順番: name | duration | timing-function | delay | iteration | direction | fill-mode | play-state */
.target {
  animation: fadeIn 1.5s ease-out 0.3s 1 normal forwards;
  /*              ^^^^                duration */
}

iteration / delay との合計時間

1 サイクルの長さが animation-duration。総再生時間は次式で求められます。

JavaScript からの取得 / 変更

const el = document.querySelector('.target');

// 取得（computed style）
const dur = getComputedStyle(el).animationDuration; // "1.2s" のような文字列

// 変更
el.style.animationDuration = '600ms';

パフォーマンスの注意点

• 短すぎる時間（50ms 等）はカクついて見えることが多い。一般的なUIアニメーションは 150ms 〜 400ms が読みやすい
• 長すぎる時間（5s 以上）はユーザー体験を損なう。装飾アニメは控えめに
• アニメーション対象は transform / opacity に絞ると GPU 加速が効きやすい

transition との違い

FAQ

Q: animation-duration を 0s にしたのに animationend が発火するのは？
A: 仕様通りです。0s でも animationstart → animationend が同時に発火します。これを利用して「とりあえずイベントを発火させる」テクニックもあります。

Q: 単位なしの数値だとどうなる？
A: animation-duration: 2; は invalid。プロパティ全体が無視されて 0s（初期値）扱いになります。必ず s か ms を付けましょう。

Q: 途中で duration を変えたら？
A: 再生中のアニメーションは新しい duration を即座に反映するブラウザと、現在サイクル終了後に反映するブラウザがあり挙動はバラバラ。動的に変えるなら animation-name ごと作り直すのが安全です。

関連

• animation プロパティ — 一括指定ショートハンド
• animation-name — 適用する @keyframes 名
• animation-delay — 開始までの遅延
• animation-iteration-count — 繰り返し回数
• animation-timing-function — イージング関数
• transition-duration — transition 版の時間指定
• @keyframes — アニメーションの定義