animation-duration プロパティ
animation-duration プロパティは、CSS アニメーションの再生時間を指定するプロパティです。
初期値は0で、何ら実行はされません。
関連プロパティ
以下は関連するプロパティです。
プロパティ | 概要 |
---|---|
animation | CSSアニメーションのプロパティを一括指定 |
animation-delay | 実行までの待ち時間。 |
animation-direction | 再生/逆再生の設定。 |
animation-fill-mode | 実行時間外の動作。 |
animation-iteration-count | 再生回数。 |
animation-name | @keyframesセレクターで定義したCSS animation名。 |
animation-play-state | 実行/停止かの設定。 |
animation-timing-function | CSS animationの実行速度曲線。 |
ページ内 Index
構文(Syntax)
CSS
DOM ( JavaScript )
値(Values)
Value | 摘要 |
---|---|
time | 初期値(default値)は0。単位は"s"または"ms"。 |
initial | 初期値に戻す。 |
inherit | 親エレメントのプロパティを継承。 |
備考(Remarks)
初期値(Default value) | 0 |
継承(Inherited) | no |
変化(Animatable) | no |
Example
animation-durationの例です。マウスポインターが以下のエレメントに乗ると影が出現します。 CSSアニメーションの開始から2秒間で終わります。animation-duration プロパティは、終了までの時間を指定することができます。
関連CSSプロパティ
プロパティ | 概要 |
---|---|
animation | CSSアニメーションのプロパティを一括指定 |
animation-delay | 実行までの待ち時間。 |
animation-direction | 再生/逆再生の設定。 |
animation-duration | CSS animationの実行時間。 |
animation-fill-mode | 実行時間外の動作。 |
animation-iteration-count | 再生回数。 |
animation-name | @keyframesセレクターで定義したCSS animation名。 |
animation-play-state | 実行/停止かの設定。 |
animation-timing-function | 実行速度曲線を定義 |