Savybė animation

Savybė animation - yra animacijos savybė santrumpa, leidžia nustatyti visas animacijos savybes vienu metu: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Reikšmių tvarka neturi reikšmės, animacijos vykdymo laikas animation-duration būtinai turi būti prieš delsą animation-delay. Privalomos yra tik savybės animation-name ir animation-duration.

Savybė taip pat gali priimti reikšmę none, kuri visiškai išjungia animaciją. Ši reikšmė yra numatytoji reikšmė.

Sintaksė

selektorius {
	animation: reikšmės;
}

Pavyzdys

Šiame pavyzdyje prieš animaciją bus delsa 3 sekundes (prieš kiekvieną naują leidimą), o tada animacija bus leidžiama per 6 sekundes:

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

Pavyzdys . Galimos problemos

Animacija, užrašyta trumpa forma, gali neveikti dėl savo pavadinimo. Pažiūrėkime į šią animaciją:

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

Atkreipkite dėmesį, aš naudoju animacijos pavadinimą reverse. Iš pirmo žvilgsnio, viskas gerai, bet animacija neveikia, nes reverse - galiojantis raktinis žodis savybei animation-direction.

Taip pat animacija neveiks naudojant trumpą formą pavadinime kitų raktinių žodžių. Bet viskas veikia gerai naudojant "pilną" formos aprašymą.

Prie raktinių žodžių-reikšmių animation-direction, gadinančių animacijas, vertėtų priskirti ir raktinius žodžius, susijusius su sklandymo funkcijomis, taip pat infinite, alternate, running, paused ir taip toliau.

Taip pat žiūrėkite

komandą @keyframes,
nustatančią pagrindinius animacijos kadrus
sklandžius perėjimus transition, kurie yra animacija užvedus pelę ant elemento