Svojstvo animation

Svojstvo animation je skraćeni način za definisanje animacije, omogućava postavljanje svih svojstava animacije odjednom: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Redosled vrednosti nije bitan, vreme trajanja animacije animation-duration obavezno mora da stoji pre kašnjenja animation-delay. Obavezna su samo svojstva animation-name i animation-duration.

Svojstvo može takođe da prima vrednost none, koja potpuno isključuje animaciju. Ova vrednost je podrazumevana vrednost.

Sintaksa

selector {
	animation: vrednosti;
}

Primer

U ovom primeru će pre animacije postojati kašnjenje od 3 sekunde (pre svakog novog pokretanja), a zatim će se animacija izvršavati tokom 6 sekundi:

<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 . Mogući problemi

Animacija, napisana u skraćenoj formi, može da ne radi zbog svog naziva. Hajde da razmotrimo sledeću animaciju:

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

Obratite pažnju, ja koristim naziv animacije reverse. Na prvi pogled, sve je u redu, ali animacija ne radi, jer je reverse validna ključna reč za svojstvo animation-direction.

Takođe animacija neće raditi kada se koristi u skraćenoj formi sa nazivima drugih ključnih reči. Ali sve dobro radi kada se koristi "puna" forma opisa.

Pored ključnih reči-vrednosti za animation-direction, koje lome animaciju, treba pomenuti i ključne reči koje se odnose na funkcije ublažavanja, kao i infinite, alternate, running, paused i tako dalje.

Pogledajte takođe

komandu @keyframes,
koja definiše ključne kadrove animacije
glatke prelaze transition, koji predstavljaju animaciju pri prelasku mišem preko elementa