これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
animation-duration CSS プロパティは、1 回のアニメーション周期が完了するまでの所要時間を指定します。
このプロパティの初期値である 0s は、アニメーションを実行しないことを示します。
アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。
| 初期値 | 0s |
|---|---|
| 適用対象 | 全要素、::before / ::after 疑似要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
書式: <time> [, <time>]*
animation-duration: 6s animation-duration: 120ms animation-duration: 1s, 15s animation-duration: 10s, 30s, 230ms
値
<time>- 1 回のアニメーションの周期の所要時間。この値は、秒 (単位 "s" で指定) またはミリ秒 (単位 "ms" で指定) で指定することができます。単位を指定しない場合は、秒で指定したものとみなします。
注: 負の値は
0 として扱われます。例示
CSS アニメーション を参照してください。
仕様書
| 仕様 | 策定状況 | コメント |
|---|---|---|
| CSS Animations Level 3 | 草案 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 3.0 -webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.5 # |
4.0 -webkit |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 2.0 -webkit | 5.0 (5.0)-moz 16.0 (16.0) |
未サポート | 未サポート | 4.2-webkit |