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

Samenvatting

De animation-duration CSS-eigenschap specificeert hoelang één cyclus duurt in een animatie.

Een waarde van 0s, wat de standaardwaarde is, geeft aan dat er geen animatie moet plaatsvinden.

Het is vaak handig om de eigenschap animation te gebruiken om alle animatie-eigenschappen in een keer in te stellen.

Initial value0s
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

Syntaxis

animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;

Waardes

<time>
De tijdsduur om één cyclus te voltooien voor een animatie. Dit mag gespecificeerd worden in seconden (door s als eenheid te geven) of in milliseconden (door ms als eenheid te geven). Als je de eenheid niet specificeert, dan is de definiëring ongeldig.
Opmerking: Negatieve waardes zijn ongeldig en zullen ervoor zorgen dat de definiëring genegeerd wordt. Sommige oude implementaties, met een voorvoegsel, kunnen hetzelfde worden beschouwd als 0s.

Formele syntaxis

<time>#

Voorbeelden

Zie CSS animations voor voorbeelden.

Specificaties

Specificatie Status Opmerking
CSS Animations
The definition of 'animation-duration' in that specification.
Working Draft Initial definition

Browser compatibiliteit

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!

Kenmerk Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basisondersteuning 3.0-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10
4.0-webkit
Kenmerk Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basisondersteuning 2.0-webkit ? 5.0 (5.0)-moz
16.0 (16.0)
Niet ondersteund Niet ondersteund 4.2-webkit 43.0

Zie ook:

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: martinidev
Laatst bijgewerkt door: martinidev,