CSSリファレンス

Tweet

animation-iteration-countはkeyframesで作成したアニメーションの回数を指定できるプロパティです。

デフォルトの回数は1でアニメーションが終了した際に停止します。

animation-iteration-countに”infinite”を指定するとアニメーションは永遠に繰り返し実行されます。

animation-iteration-count:infinite;

animation-iteration-countに数値以外の値を指定した場合はアニメーションは終了します。また、負の値は指定できません。

animation-iteration-countはanimation-directionへのalternate指定と合わせてよく利用されます。

一部のブラウザでは「-webkit-」といったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。

-webkit-animation-iteration-count:10;
animation-iteration-count:10;

CSS３のanimationはAndroid端末での不具合が多いため利用する際には注意してください。(参考:@keyframesとAndroid – to-R)

対応ブラウザ

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

4.5. The ‘animation-iteration-count’ Property - W3C

登録日 : 2013年07月25日 最終更新日 : 2013年8月25日

同じカテゴリー(Animation)のエントリー

• Keyframes
• animation
• animation-fill-mode
• animation-delay
• animation-play-state
• animation-direction
• animation-iteration-count
• animation-timing-function
• animation-duration
• animation-name