Proprietatea animation

Proprietatea animation este o proprietate prescurtare pentru animație, permite să setați toate proprietățile pentru animație simultan: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Ordinea valorilor nu contează, timpul de execuție animației animation-duration trebuie obligatoriu să fie plasat înaintea întârzierii animation-delay. Obligatorii sunt doar proprietățile animation-name și animation-duration.

Proprietatea poate de asemenea primi valoarea none, care dezactivează animația complet. Această valoare este valoarea implicită.

Sintaxă

selector {
	animation: valori;
}

Exemplu

În acest exemplu va exista o întârziere înaintea animației de 3 secunde (înaintea fiecărei redări noi), iar apoi animația va fi redată timp de 6 secunde:

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

Exemplu . Posibile probleme

Animația, scrisă în formă prescurtată, poate să nu funcționeze din cauza numelui său. Să analizăm următoarea animație:

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

Observați, folosesc numele animației reverse. La prima vedere, totul este în regulă, dar animația nu funcționează, deoarece reverse este un cuvânt cheie valid pentru proprietatea animation-direction.

De asemenea, animația nu va funcționa atunci când este utilizată în formă prescurtată cu alte cuvinte cheie în nume. Dar totul funcționează bine atunci când este utilizată forma "completă" de descriere.

Printre cuvintele cheie-valori animation-direction, care strică animațiile, se numără și cuvintele cheie, referitoare la funcțiile de netezire, precum și infinite, alternate, running, paused și așa mai departe.

Vedeți și

comanda @keyframes,
care definește cadrele cheie ale animației
tranzițiile line transition, care reprezintă o animație la trecerea cursorului peste element