Style animation-eigenschap
- Vorige pagina alignSelf
- Volgende pagina animationDelay
- Terug naar het vorige niveau HTML DOM Style Object
Definitie en gebruik
animation
De eigenschap is een verkorte vorm van zes animatie-eigenschappen:
- animationName
- animationDuration
- animationTimingFunction
- animationDelay
- animationIterationCount
- animationDirection
Opmerking:Geef altijd op animationDuration-eigenschapAnders is de duur 0 en het wordt nooit afgespeeld.
Voorbeeld
Gebruik de verkorte eigenschap om de animatie van het <div>-element te wijzigen:
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
Syntax
Geef de animation eigenschap terug:
object.style.animation
Stel de animation eigenschap in:
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
Eigenschapswaarde
Waarde | Beschrijving |
---|---|
animationName | Bepaalt de naam van de keyframes die aan de selector worden gebonden. |
animationDuration | Bepaalt hoeveel seconden of milliseconden de animatie duurt. |
animationTimingFunction | Bepaalt de snelheidskromme van de animatie. |
animationDelay | Bepaalt de vertraging voordat de animatie begint. |
animationIterationCount | Bepaalt hoe vaak de animatie moet worden afgespeeld. |
animationDirection | Bepaalt of de animatie in een alternatieve herhaling反向 speelt. |
animationFillMode | Bepaalt de waarde die naast de uitvoeringstijd wordt toegepast. |
animationPlayState | Bepaalt of de animatie draait of wordt onderbroken. |
initial | Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial. |
inherit | Erft deze eigenschap van de ouder-element. Raadpleeg inherit. |
Technische details
Standaardwaarde: | none 0 gemakkelijk 0 1 normaal none draaiend |
---|---|
Terugkeervalue: | Een tekenreeks die de animation eigenschappen. |
CSS Versie: | CSS3 |
Browserondersteuning
animation
is een CSS3 (1999) kenmerk.
Alle browsers ondersteunen het volledig:
Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera | IE |
Ondersteund | Ondersteund | Ondersteund | Ondersteund | Ondersteund | 11 |
Gerelateerde pagina's
CSS Referentiehandleiding:animation eigenschappen
- Vorige pagina alignSelf
- Volgende pagina animationDelay
- Terug naar het vorige niveau HTML DOM Style Object