備忘録的プログラミングリファレンス

animation-iteration-count プロパティ

 animation-iteration-count プロパティは、CSS アニメーションの実行回数を指定する CSS プロパティです。

 CSS アニメーションを利用するは、まずは animation プロパティの設定が必要です。

div エレメントにマウスポインターが乗ったときに mymove という CSS アニメーションが動作
div:hover{
	animation: mymove 1s forwards;
	animation-iteration-count: 3;
}

@keyframes mymove {
	from {

	}
	to {
		box-shadow: 10px 10px;
	}
}

ページ内 Index

構文(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回繰り返します。