CSSアニメーション-期間プロパティ
例
アニメーションが3秒で1サイクル完了するように指定します。
div {
animation-duration: 3s;
}
定義と使用法
このanimation-duration
プロパティは、アニメーションが1サイクルを完了するのにかかる時間を定義します。
デフォルト値: | 0 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | オブジェクト.style.animationDuration = "3s" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
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- |
CSS構文
animation-duration: time|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
time | Specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSSアニメーション
HTML DOMリファレンス:animationDurationプロパティ