これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
animation-iteration-count CSS プロパティは、アニメーションを停止するまでに、アニメーションの周期を何回実行するかを定義します。
アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。
- 初期値
1 - 適用範囲 すべての要素と 疑似要素 (
::before/::after) - 継承 継承しない
- メディア
visual - 計算値 指定値
- アニメーションの可否 不可
- 正規順序 the unique non-ambiguous order defined by the formal grammar
構文
書式: [ infinite | <number> ] [, [ infinite | <number> ] ]*
animation-iteration-count: infinite animation-iteration-count: 3 animation-iteration-count: 2.5 animation-iteration-count: 2, 0, infinite
値
infinite- アニメーションは無期限に繰り返されます。
<number>- アニメーションを繰り返す回数。初期値は
1です。負の値は0として扱われます。また、アニメーションの周期の一部を実行するために、整数以外の値を指定することも可能です。例えば0.5を指定すると、アニメーションの周期の半分を実行します。
例示
『CSS アニメーション』の頁を参照してください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Animations Level 3 | 草案 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | (有) -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 |
|---|---|---|---|---|---|
| 基本サポート | (有) -webkit | 5.0 (5.0) -moz 16.0 (16.0) |
? | ? | ? |
関連情報
- CSS アニメーション
AnimationEvent- アニメーション関連の CSS プロパティ及び @-規則:
animation、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、@keyframes