CSS -animatie- eigenschap
Voorbeeld
Een animatie binden aan een <div>-element, met behulp van de eigenschap steno:
div
{
animation: mymove 5s infinite;
}
Definitie en gebruik
De animation
eigenschap is een steno-eigendom voor:
- animatienaam
- animatieduur
- animatie-timing-functie
- animatie-vertraging
- animatie-iteratie-telling
- animatie-richting
- animatie-vulmodus
- animatie-afspeelstatus
Opmerking: geef altijd de eigenschap animatie-duur op, anders is de duur 0 en wordt deze nooit afgespeeld.
Standaardwaarde: | geen 0 gemak 0 1 normaal geen actief |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.animation="mymove 5s oneindig" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS-syntaxis
animation: name duration timing-function delay iteration-count
direction fill-mode play-state;
Eigendomswaarden
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Gerelateerde pagina's
CSS-zelfstudie: CSS-animaties
HTML DOM-referentie: animatie-eigenschap