Vlastnost animation

Vlastnost animation je zkratková vlastnost pro animaci, umožňuje nastavit všechny vlastnosti pro animaci současně: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Pořadí hodnoty nemá význam, doba trvání animace animation-duration musí povinně stát před zpožděním animation-delay. Povinné jsou pouze vlastnosti animation-name a animation-duration.

Vlastnost může také přijmout hodnotu none, která animaci úplně vypne. Tato hodnota je výchozí hodnotou.

Syntaxe

selektor {
	animation: hodnoty;
}

Příklad

V tomto příkladu bude před animací zpoždění 3 sekundy (před každým novým přehráním), a poté se animace bude přehrávat po dobu 6 sekund:

<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říklad . Možné problémy

Animace zapsaná ve zkrácené formě může nefungovat kvůli svému názvu. Podívejme se na následující animaci:

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

Všimněte si, používám název animace reverse. Na první pohled je vše v pořádku, ale animace nefunguje, protože reverse je platné klíčové slovo pro vlastnost animation-direction.

Také animace nebude fungovat při použití ve zkrácené formě, pokud název obsahuje jiná klíčová slova. Ale vše funguje dobře při použití "plné" formy popisu.

Mezi klíčová slova-hodnoty animation-direction, které mohou rozbít animace, patří i klíčová slova patřící k vyhlazovacím funkcím, a také infinite, alternate, running, paused a tak dále.

Viz také

příkaz @keyframes,
který definuje klíčové snímky animace
plynulé přechody transition, které představují animaci při najetí na element