MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

animation-duration

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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

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)
No support No support 4.2-webkit 43.0

Zie ook:

Documentlabels en -medewerkers

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