Az animation tulajdonság

Az animation tulajdonság egy animációs rövidítő tulajdonság, amely lehetővé teszi az összes animációs tulajdonság egyidejű megadását: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Az értékek sorrendje nem számít, az animáció lejátszási idejének animation-duration kötelezően a késleltetés animation-delay előtt kell állnia. Csak az animation-name és a animation-duration tulajdonságok kötelezőek.

A tulajdonság felveheti a none értéket is, ami teljesen kikapcsolja az animációt. Ez az érték az alapértelmezett.

Szintaxis

selector {
	animation: értékek;
}

Példa

Ebben a példában az animáció előtt 3 másodperc késleltetés lesz (minden új lejátszás előtt), majd az animáció 6 másodpercig fog lejátszódni:

<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;
}

Példa . Lehetséges problémák

A rövid formában írt animáció esetleg nem működhet a neve miatt. Nézzük meg a következő animációt:

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

Figyeljük meg, hogy az animáció reverse nevet használja. Első pillantásra minden rendben van, de az animáció nem működik, mivel a reverse egy érvényes kulcsszó az animation-direction tulajdonsághoz.

Az animáció szintén nem fog működni, ha a rövid formában más kulcsszavakat használunk a névben. De minden jól működik a "teljes" leíró forma használatakor.

Az animation-direction tulajdonság értékeiként szolgáló, az animációkat tönkretevő kulcsszavak közé tartoznak az simítási függvényekre vonatkozó kulcsszavak, valamint a infinite, alternate, running, paused, stb.

Lásd még

a @keyframes parancsot,
amely az animáció kulcsképeit határozza meg
a sima átmeneteket transition, amelyek az elem fölé húzás animációját jelentik