Свойство 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. На первый взгляд, все хорошо, но aнимация не работает, т.к. reverse - валидное ключевое слово для свойства animation-direction.

Также анимация не будет работать при использовании в краткой форме в названии других ключевых слов. Но все работает хорошо при использовании "полной" формы описания.

К ключевым словам-значениям animation-direction, ломающими анимации, стоит отнести и ключевые слова, относящиеся к функциям сглаживания, а так же infinite, alternate, running, paused и так далее.

Смотрите также

команду @keyframes,
задающую ключевые кадры анимации
плавные переходы transition, представляющие собой анимацию по наведению на элемент