CSS の animation-duration プロパティは、1回のアニメーション周期が完了するまでの所要時間を設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである 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 プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。
形式文法
<time>#
例
CSS アニメーションを参照してください。
仕様書
| 初期値 | 0s |
|---|---|
| 適用対象 | すべての要素、::before / ::after 疑似要素 |
| 継承 | なし |
| メディア | 視覚 |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Animations animation-duration の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-duration | Chrome
完全対応
43
| Edge
完全対応
12
| Firefox
完全対応
16
| IE 完全対応 10 | Opera
完全対応
30
| Safari
完全対応
9
| WebView Android
完全対応
43
| Chrome Android
完全対応
43
| Firefox Android
完全対応
16
| Opera Android
完全対応
30
| Safari iOS
完全対応
9
| Samsung Internet Android
完全対応
4.0
|
凡例
- 完全対応
- 完全対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEventAPI