Свойство 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.

См. также keyframes - ключевые кадры анимации.

См. также transition - плавные переходы (анимация по наведению на элемент).

Синтаксис

селектор {
	animation: animation-name | animation-duration | animation-delay | animation-timing-function | animation-direction | animation-fill-mode | animation-play-state;
}

Для добавления нескольких анимаций следует задавать значения через запятую:

селектор {
	animation: anim1 3s ease, anim2 5s ease-in 6s;
}

Значения

См. соответствующие свойства.

Значение none отключает анимацию совсем.

Значение по умолчанию: none.

Примеры

Внимание! Кроссбраузерные приставки для анимации опущены для краткости, но они нужны! Как сделать кроссбраузерно смотрите по ссылке keyframes.

Пример

В данном примере перед анимацией будет задержка в 3 секунды (перед каждым новым проигрыванием), а затем анимация будет проигрываться в течении 6-х секунд:

@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;
	}
}
.example{
	animation: reverse 2s 1s;
}
}

Заметьте, я использую название анимации reverse. На первый взгляд, все хорошо, но aнимация не работает, т.к. reverse — валидное ключевое слово для свойства animation-direction. Так же анимация не будет работать при использовании в краткой форме в названии других ключевых слов. Но все работает хорошо при использовании 'полной' формы описания.

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