animation-iteration-count プロパティ
animation-iteration-count プロパティは、CSS アニメーションの実行回数を指定する CSS プロパティです。
CSS アニメーションを利用するは、まずは animation プロパティの設定が必要です。
div:hover{ animation: mymove 1s forwards; animation-iteration-count: 3; } @keyframes mymove { from { } to { box-shadow: 10px 10px; } }
ページ内 Index
- ad -
構文(Syntax)
CSS
animation-iteration-count:[ number | infinite | initial | inherit ];
DOM ( JavaScript )
object.style.animationIterationCount
object.style.animationIterationCount="[ number | infinite | initial | inherit ]"
値(Values)
Value | 摘要 |
---|---|
number | 繰り返し回数で初期値(default値)は1。 |
infinite | 永遠に繰り返す |
initial | 初期値に戻す。 |
inherit | 親エレメントのプロパティを継承。 |
備考(Remarks)
初期値(Default value) | 1 |
継承(Inherited) | no |
変化(Animatable) | no |
Example
animation-iteration-count プロパティの例です。値の3によってCSSアニメーションを3回繰り返します。
- ad -
関連プロパティ
以下は関連するプロパティです。
プロパティ | 概要 |
---|---|
animation | CSSアニメーションのプロパティを一括指定 |
animation-delay | 実行までの待ち時間。 |
animation-direction | 再生/逆再生の設定。 |
animation-duration | CSS animationの実行時間。 |
animation-fill-mode | 実行時間外の動作。 |
animation-name | @keyframesセレクターで定義したCSS animation名。 |
animation-play-state | 実行/停止かの設定。 |
animation-timing-function | CSS animationの実行速度曲線。 |