Својство animation

Својството animation - е својство кратенка за анимација, овозможува да се зададат сите својства за анимација истовремено: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Редоследот на вредностите не е важен, времетраењето на анимацијата animation-duration мора задолжително да стои пред одложувањето animation-delay. Задолжителни се само својствата animation-name и animation-duration.

Својството може да прими и вредност none, која целосно ја исклучува анимацијата. Оваа вредност е стандардната вредност.

Синтакса

селектор {
	animation: вредности;
}

Пример

Во овој пример ќе има одложување пред анимацијата од 3 секунди (пред секое ново пуштање), а потоа анимацијата ќе се пушта во текот на 6-те секунди:

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

Пример . Можни проблеми

Анимацијата, запишана во кратка форма, може да не работи поради своето име. Да ја разгледаме следнава анимација:

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

Забележете, го користам името на анимацијата reverse. На прв поглед, сè е во ред, но анимацијата не работи, бидејќи reverse - е валидна клучна збор за својството animation-direction.

Исто така, анимацијата нема да работи при употреба во кратка форма доколку името содржи други клучни зборови. Но, сè работи добро при употреба на "целосната" форма на опис.

Кон клучните зборови-вредности на animation-direction, кои ја расипуваат анимацијата, треба да се вбројат и клучните зборови кои се однесуваат на функциите за загладување, како и infinite, alternate, running, paused и така натаму.

Погледнете исто така

командата @keyframes,
која ги задава клучните кадри на анимацијата
мазните премини transition, кои претставуваат анимација при преминување на елементот