CSS3 animation-duration プロパティ
例
アニメーションを2秒で完了するように設定します:
animation-duration:2s;
-webkit-animation-duration:2s; /*Safari と Chrome*/
試してみる »
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示します。
-webkit-、-ms- または -moz- の直前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザのバージョン番号です。
| プロパティ | |||||
|---|---|---|---|---|---|
| animation-duration | 43.0 3.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
タグの定義と使用説明
animation-duration プロパティは、アニメーションが1サイクルを完了するのに必要な時間を秒またはミリ秒で定義します。
| デフォルト値: | 0 |
|---|---|
| 継承: | no |
| バージョン: | CSS3 |
| JavaScript 構文: | object object.style.animationDuration="3s" |
構文
animation-duration: time;
| 值 | 説明 |
|---|---|
| time | アニメーションの再生が完了するまでにかかる時間を指定します。デフォルト値は 0 で、アニメーション効果がないことを意味します。 |
関連記事
CSS3 チュートリアル:CSS3 アニメーション
その他の拡張