Свойство 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, които представляват анимация при посочване на елемент