animation-duration
は CSS のプロパティで、1回のアニメーション周期が完了するまでの所要時間を設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation
プロパティを使用すると便利です。
構文
/* 単一のアニメーション */
animation-duration: 6s;
animation-duration: 120ms;
/* 複数のアニメーション */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
値
<time>
- 1回のアニメーションの周期にかかる時間。この値は、秒 (
s
) またはミリ秒 (ms
) で指定することができます。値は正の数か0でなければならず、単位は必須です。0s
の値は、既定値ですが、アニメーションを実行しないことを意味します。
注: 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は 0s
と等価に解釈するかもしれません。
注: animation-*
プロパティにカンマ区切りで複数の値を指定した場合、 animation-name
プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。
公式定義
形式文法
例
CSS アニメーションを参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations animation-duration の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEvent
API