CSS animation Eigenschap

Definitie en gebruik

animation Eigenschap is een afkortingseigenschap die zes animatie-eigenschappen instelt:

Opmerking:Definieer altijd: animation-duration Eigenschappen, anders speelt de animatie niet af als de duur 0 is.

CSS3 Handleiding:CSS animatie

HTML DOM Referentiehandleiding:animation-eigenschap

Gebruik de verkorte eigenschap om de animatie te koppelen aan het div-element:

div
{
animation:mymove 5s infinite;
}

animation: name duration timing-function delay iteration-count direction;

Waarde	Beschrijving
animation-name	Stelt de naam van de keyframe in die moet worden gebonden aan de selector.
animation-duration	Stelt de tijd in die nodig is om de animatie te voltooien, in seconden of milliseconden.
animation-timing-function	Stelt de snelheidskromming van de animatie in.
animation-delay	Stelt de vertraging in voordat de animatie begint.
animation-iteration-count	Stelt het aantal keren in dat de animatie moet worden afgespeeld.
animation-direction	Stelt in of de animatie in omgekeerde volgorde moet worden afgespeeld.
animation-fill-mode	Stelt de waarden in die worden toegepast buiten de uitvoeringstijd van de animatie.
animation-play-state	Stelt in of een animatie actief draait of wordt onderbroken.

Standaardwaarde:	none 0 ease 0 1 normal
Inheritantie:	nee
Versie:	CSS3
JavaScript-syntaxis:	object.style.animation="mymove 5s infinite"

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Getallen met -webkit-、-moz- of -o- voorafgaand aan een cijfer geven de eerste versie aan die het voorvoegsel gebruikt.

Chrome	IE / Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
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-