We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

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 value1
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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>#

where
<single-animation-iteration-count> = infinite | <number>

Examples

ZIe CSS animations voor voorbeelden.

Specifications

Specification Status Comment
CSS Animations
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!

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

See also

Documentlabels en -medewerkers

Labels: 
Aan deze pagina hebben bijgedragen: MaryGr
Laatst bijgewerkt door: MaryGr,