animation-iteration-count

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

animation-iteration-count

This page has been flagged with the following issues:

High-level issues:

• Needs Topics

• Missing Relevant Sections

• Data Not Semantic

• Unreviewed Import

Content:

• Incomplete

• Cleanup

• Examples Best Practices

W3C Working Draft

Summary

Specifies how many times an animation cycle should play

Overview table

Initial value	1
Applies to	all elements
Inherited	No
Media	visual
Computed value	as specified
Animatable	No
CSS Object Model Property

Syntax

• animation-iteration-count: single-animation-iteration-count

Values

single-animation-iteration-count

<number> or infinite.

<number>

The default value is 1, which plays the animation once, from beginning to end. Numbers other than 1 cause the animation to play the specified number of times. Non-integer numbers cause the animation to end part-way through a cycle.

infinite

The animation repeats forever.

Examples

[Robert Nyman's examples View live example]

CSS

Usage

This property accepts non-integer values. If a non-integer value is specified, the animation terminates mid-cycle. If 0 is specified, no animation is applied. If a negative value is specifed, the value is ignored and 0 is used instead.

Multiple values separated by commas are applied to the corresponding animations listed in the animation-name property. Excess values are ignored. If fewer values are listed, the browser cycles through them again until each animation has been assigned an iteration count.

Syntax

animation-iteration-count : 1 | <number> | infinite [ , 1 | <number> | infinite ] *

Standards information

• CSS Animations Module Level 3, Section 3.5

Related specifications

Specification	Status	Related Changes
[ ]

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	4.0 -webkit	16.0 5.0 -moz	10.0	12.1 12.0 -o	4.0 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	2.1 -webkit	7.0 -webkit	18.0 -webkit	16.0 15.0 -moz	WP 8 (IE 10)	12.1	Unsupported	3.2 -webkit

Compatibility notes

Browser	Version	Note
Internet Explorer	10.0	The -ms- prefix property is deprecated and should not be used.

See also

Related articles

Animation

• JavaScript animation

• requestAnimationFrame

• @keyframes

• css/cssom/CSSKeyframeRule

• css/cssom/CSSKeyframeRule/keyText

• css/cssom/CSSKeyframeRule/style

• css/cssom/CSSKeyframesRule

• css/cssom/CSSKeyframesRule/cssRules

• css/cssom/CSSKeyframesRule/deleteRule

• css/cssom/CSSKeyframesRule/findRule

• css/cssom/CSSKeyframesRule/insertRule

• css/cssom/CSSKeyframesRule/name

• cubic-bezier

• steps

• animation

• animation-delay

• animation-direction

• animation-duration

• animation-fill-mode

• animation-iteration-count

• animation-name

• animation-play-state

• animation-timing-function

• Animations

• transition

• transition-timing-function

• SVG animation

• Making things move with CSS3 animations

• Dynamic visual effects with CSS3 transitions

Related pages (MSDN)

• CSSStyleDeclaration
• currentStyle
• style
• a
• abbr
• acronym
• b
• bdo
• big
• br
• cite
• code
• dfn
• em
• i
• img
• input
• kbd
• label
• q
• samp
• select
• small
• span
• strong
• sub
• sup
• textArea
• tt
• var
• address
• blockQuote
• div
• dl
• fieldSet
• form
• noFrames
• noScript
• ol
• p
• pre
• table
• ul
• dd
• dt
• li
• tBody
• td
• tFoot
• th
• tHead
• tr
• button
• del
• ins
• map
• object
• script

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]