De eigenschap animation

De eigenschap animation is een verkorte eigenschap voor animatie, waarmee je alle animatie-eigenschappen tegelijk kunt instellen: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

De volgorde van de waarden maakt niet uit, behalve dat de animatieduur animation-duration verplicht vóór de vertraging animation-delay moet staan. Alleen de eigenschappen animation-name en animation-duration zijn verplicht.

De eigenschap kan ook de waarde none aannemen, wat de animatie volledig uitschakelt. Deze waarde is de standaardwaarde.

Syntaxis

selector {
	animation: waarden;
}

Voorbeeld

In dit voorbeeld zal er een vertraging zijn van 3 seconden (voor elke nieuwe afspeelbeurt), en daarna zal de animatie gedurende 6 seconden worden afgespeeld:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld . Mogelijke problemen

Een animatie, geschreven in verkorte vorm, kan mogelijk niet werken vanwege zijn naam. Laten we de volgende animatie bekijken:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Let op, ik gebruik de animatienaam reverse. Op het eerste gezicht lijkt alles in orde, maar de animatie werkt niet, omdat reverse een geldig sleutelwoord is voor de eigenschap animation-direction.

Ook zal de animatie niet werken wanneer in de verkorte vorm andere sleutelwoorden als naam worden gebruikt. Maar alles werkt goed bij het gebruik van de "volledige" beschrijvingsvorm.

Naast de sleutelwoord-waarden van animation-direction die animaties kunnen breken, horen ook de sleutelwoorden die betrekking hebben op timingfuncties, evenals infinite, alternate, running, paused enzovoort.

Zie ook

de @keyframes regel,
die de keyframes van de animatie definieert
vloeiende overgangen transition, die een animatie bij hover op een element vertegenwoordigen