Vlastnosť animation

Vlastnosť animation je skrátená vlastnosť pre animáciu, umožňuje nastaviť všetky vlastnosti pre animáciu naraz: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Poradie hodnoty nemá význam, čas vykonania animácie animation-duration musí nevyhnutne stáť pred oneskorením animation-delay. Povinnými sú len vlastnosti animation-name a animation-duration.

Vlastnosť môže tiež nadobúdať hodnotu none, ktorá úplne vypína animáciu. Táto hodnota je predvolenou hodnotou.

Syntax

selektor {
	animation: hodnoty;
}

Príklad

V tomto príklade bude pred animáciou oneskorenie 3 sekundy (pred každým novým prehrávaním), a potom sa animácia bude prehrávať počas 6 sekúnd:

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

Príklad . Možné problémy

Animácia zapísaná v krátkej forme môže nefungovať kvôli svojmu názvu. Pozrime sa na nasledujúcu animáciu:

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

Všimnite si, používam názov animácie reverse. Na prvý pohľad je všetko v poriadku, ale animácia nefunguje, pretože reverse je platné kľúčové slovo pre vlastnosť animation-direction.

Tiež animácia nebude fungovať pri použití v krátkej forme v názve iných kľúčových slov. Ale všetko funguje dobre pri použití "úplnej" formy opisu.

Medzi kľúčové slová-hodnoty animation-direction, ktoré kazia animácie, patria aj kľúčové slová týkajúce sa funkcií vyhladenia, a tiež infinite, alternate, running, paused a tak ďalej.

Pozri tiež

príkaz @keyframes,
ktorý definuje kľúčové fázy animácie
plynulé prechody transition, ktoré predstavujú animáciu pri prejdení myšou nad prvok