アニメーション再生時間プロパティ

最終更新：2026-09-13

animation-duration アニメーション再生時間プロパティ

animation-duration プロパティは、アニメーションが 1 周期を完了するまでにかかる時間を設定します。短い値はアニメーションを速くし、長い値は遅くします。これは animation ショートハンドの一部であり、単独で使うとショートハンドで設定した時間を上書きします。

カテゴリ
初期値	0s
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

animation-duration: <time>#;

⚙️ 値

値	タイプ	説明
`<time>`	タイプ	アニメーションの再生時間

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
animation-duration	✓ v43	✓ v12	✓ v16	✓ v9	✓ v30
すべての主要ブラウザーでサポート

注意： デフォルト値は 0s です。つまりアニメーションは瞬時に完了し、効果は見えません。animation ショートハンドを使う場合は、必ず 0 より大きい時間を明示的に設定してください。

❓ よくある質問

Qanimation-duration プロパティは CSS で小数点以下の秒数を使えますか？

Aはい。0.5s、0.25s、150ms、800ms などの値はすべて有効です。ボタンのフィードバックやホバーヒントなどのマイクロインタラクションでは、100ms〜300ms が一般的です — 目に見えるが鈍重ではありません。ページレベルの登場アニメーションは通常 300ms〜600ms です。1s を超えるアニメーションは待ち時間をはっきり感じさせ、進行状況や強調の場面に向いています。

Q1 つの要素の異なる CSS アニメーションに異なる時間を設定できますか？

Aはい。animation-duration はカンマ区切りのリストを受け取り、animation-name の名前と 1 対 1 で対応します。例えば、animation-name: a, b; animation-duration: 1s, 2s; とすると、アニメーション a は 1s、アニメーション b は 2s で再生されます。名前より時間の数が少ない場合、不足分は最初の値が再利用されます。

Qanimation-duration: 0s だとどうなりますか？アニメーションは実行されますか？

A見えるアニメーションは生成されません。0s の時間はアニメーションが瞬時に完了し、要素が終了キーフレームに直接飛ぶことを意味し、アニメーションがないことと等価です。animation ショートハンドのデフォルト時間は 0s なので、animation: name; と時間を与えずに書いても再生されません — 常に 0 より大きい時間を与えてください。

Qanimation-duration と transition-duration の違いは何ですか？

Aanimation-duration は @keyframes アニメーションの 1 周期にかかる時間を設定するのに対し、transition-duration は状態変化後にトランジションが開始値から終了値へ移行するのにかかる時間を設定します。どちらも時間値を取り、どちらもカンマ区切りのリストを受け入れますが、作用する仕組みは全く異なり、互いに置き換えることはできません。