Lastnost animation

Lastnost animation je okrajšava za animacijo, ki omogoča nastavitev vseh lastnosti za animacijo hkrati: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Vrstni red vrednosti ni pomemben, čas trajanja animacije animation-duration mora nujno stati pred zamiko animation-delay. Obvezni sta samo lastnosti animation-name in animation-duration.

Lastnost lahko sprejme tudi vrednost none, ki popolnoma onemogoči animacijo. Ta vrednost je privzeta.

Sintaksa

selektor {
	animation: vrednosti;
}

Primer

V tem primeru bo pred animacijo zamika v 3 sekundah (pred vsakim novim predvajanjem), nato pa se bo animacija predvajala 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;
}

Primer . Možne težave

Animacija, zapisana v kratki obliki, morda ne deluje zaradi svojega imena. Oglejmo si naslednjo animacijo:

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

Upoštevajte, da uporabljam ime animacije reverse. Na prvi pogled je vse v redu, vendar animacija ne deluje, ker je reverse veljavna ključna beseda za lastnost animation-direction.

Prav tako animacija ne bo delovala, če v kratki obliki uporabimo druge ključne besede v imenu. Vendar vse dobro deluje pri uporabi "polne" oblike opisa.

Med ključne besede-vrednosti animation-direction, ki lomijo animacije, spadajo tudi ključne besede, ki se nanašajo na funkcije glajenja, kot tudi infinite, alternate, running, paused in tako naprej.

Glej tudi

ukaz @keyframes,
ki določa ključne kadre animacije
glasni prehodi transition, ki predstavljajo animacijo ob preletu miške nad elementom