animation-iteration-count

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Summary

Met de animation-iteration-count CSS property beschrijf je het aantal keren dat een animatie speelt totdat de animatie stopt.

Je kunt ook  de shorthand property te gebruiken om alle animatie-eigenschappen meteen in één regel in te stellen.

Initial value (en-US)1
Applies toall elements, ::before (en-US) and ::after (en-US) pseudo-elements
Inherited (en-US)no
Computed value (en-US)as specified
Animation typediscrete

Syntax

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

animation-iteration-count: 2, 0, infinite;

Values

infinite
The animatie herhaalt zich non-stop.
<number>
Hoeveel keer een animatie zich herhaalt; 1 keer is default. Negatieve waarden zijn ongeldig. Je mag ook non-integer waarden declareren om een deel van de animatie af te spelen (bijvoorbeeld 0.5 zal de helft van de animatie-cyclus afspelen).

Formal syntax

<single-animation-iteration-count># (en-US)
where 
<single-animation-iteration-count> = infinite | (en-US) <number> (en-US)

Examples

ZIe CSS animations voor voorbeelden.

Specifications

Specification Status Comment
CSS Animations Level 1
The definition of 'animation-iteration-count' in that specification.		 Working Draft Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit (en-US)
43.0		 5.0 (5.0)-moz (en-US)
16.0 (16.0)		 10  12 -o (en-US)
12.10		 4.0-webkit (en-US)
Feature Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes)-webkit (en-US) ? 5.0 (5.0)-moz (en-US)
16.0 (16.0)		 ? ? ? 43.0
 

See also