Omadus animation

Omadus animation on animatsiooni lühendomadus, mis võimaldab määrata kõik animatsiooni omadused korraga: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Väärtuste järjekord ei oma tähtsust, kuid animatsiooni kestus animation-duration peab tingimata olema enne viivet animation-delay. Ainult omadused animation-name ja animation-duration on kohustuslikud.

Omadus võib võtta ka väärtuse none, mis lülitab animatsiooni täielikult välja. See väärtus on vaikeväärtus.

Süntaks

valija {
	animation: väärtused;
}

Näide

Selles näites on animatsiooni ees viive 3 sekundit (enne iga uut esitust), seejärel esitatakse animatsioon 6 sekundi jooksul:

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

Näide . Võimalikud probleemid

Lühivormis kirjutatud animatsioon ei pruugi töötada oma nime tõttu. Vaatleme järgmist animatsiooni:

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

Pange tähele, et ma kasutan animatsiooni nime reverse. Esmapilgul on kõik korras, kuid animatsioon ei tööta, kuna reverse on kehtiv võtmesõna omadusele animation-direction.

Samuti ei tööta animatsioon lühivormis kasutamisel, kui nimes on muid võtmesõnu. Kuid kõik töötab hästi "täisvormi" kasutamisel.

Võtmesõnad-väärtused animation-direction, mis katkestavad animatsioonid, hõlmavad ka võtmesõnu, mis kuuluvad silumisfunktsioonidesse, ning ka infinite, alternate, running, paused jne.

Vaata ka

käsu @keyframes,
mis määrab animatsiooni võtmeraamid
sujuvad ülemineked transition, mis kujutavad endast elemendile hiirega viimise animatsiooni