animation-duration

Experimental

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 (en-US) te gebruiken om alle animatie-eigenschappen in een keer in te stellen.

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

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> (en-US)# (en-US)

Voorbeelden

Zie CSS animations voor voorbeelden.

Specificaties

Specificatie Status Opmerking
CSS Animations Level 1
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! (en-US)

Kenmerk Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basisondersteuning 3.0-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)
Kenmerk Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basisondersteuning 2.0-webkit (en-US) ? 5.0 (5.0)-moz (en-US)
16.0 (16.0)
Niet ondersteund Niet ondersteund 4.2-webkit (en-US) 43.0

Zie ook: