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

Синтаксис

cssселектор {
  animation: значения;
}

Пример

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

html<div id="elem"></div>

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

Результат:

Пример . Возможные проблемы

Анимация, записанная в краткой форме, может не работать из-за своего названия. Давайте рассмотрим следующую анимацию:

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

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

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

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

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