animation-duration

by 3 contributors:

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

animation-duration CSS プロパティは、1 回のアニメーション周期が完了するまでの所要時間を指定します。

このプロパティの初期値である 0s は、アニメーションを実行しないことを示します。

アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。

構文

書式: <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

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, yyss, FredB
最終更新者: ethertank,
サイドバーを隠す