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;
	}
}

- ad -

構文(Syntax)

animation-iteration-count:[ number | infinite | initial | inherit ];

値の取得

object.style.animationIterationCount

値の設定

object.style.animationIterationCount="[ number | infinite | initial | inherit ]"

　animation-iteration-count プロパティの例です。値の3によってCSSアニメーションを３回繰り返します。

- 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の実行速度曲線。