Vlastnosť animation-name

Vlastnosť animation-name nastavuje názov animácie (alebo animácií), ktorá sa bude aplikovať na daný element. Názov animácie musí byť rovnaký, ako je zadaný pri definovaní kľúčových snímkov @keyframes.

Syntax

selektor {
	animation-name: názov animácie;
}

Príklad

V tomto príklade má animácia názov move:

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

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

#elem {
	animation-name: move;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Pozri tiež

vlastnosť animation-duration,
ktorá nastavuje trvanie animácie
vlastnosť animation-delay,
ktorá nastavuje oneskorenie pred vykonaním animácie
vlastnosť animation-timing-function,
ktorá nastavuje rýchlosť vykonávania animácie
vlastnosť animation-iteration-count,
ktorá nastavuje počet iterácií animácie
vlastnosť animation-direction,
ktorá nastavuje smer animácie
vlastnosť animation-fill-mode,
ktorá nastavuje stav animácie
vlastnosť animation-play-state,
ktorá umožňuje pozastaviť animáciu
vlastnosť animation,
predstavujúca skratku pre animácie
príkaz @keyframes,
nastavujúci kľúčové snímky animácie
plynulé prechody transition, predstavujúce animáciu pri prejdení myšou nad element