# Свойство 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`, представляющие собой анимацию по наведению на элемент

←→
↑