CSS свойство animation

Позволяет установить несколько или все значения свойств анимации в одном объявлении.

Свойство animation является краткой формой записи восьми свойств анимации:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Примечание: Следует всегда указывать значение для свойства animation-duration, если его не указать это будет означать, что продолжительность равна нулю и анимация не будет воспроизводиться.

CSS синтаксис

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

Возможные значения

Значение Описание
animation-name Указывает имя набора ключевых кадров @keyframes.
animation-duration Определяет сколько секунд или миллисекунд понадобится, чтобы закончить 1 цикл анимации.
animation-timing-function Определяет кривую скорости для анимации.
animation-delay Определяет задержку анимации.
animation-iteration-count Определяет сколько раз проигрывать анимацию.
animation-direction Определяет будет ли анимация проигрываться в обратном направлении на альтернативных циклах.
animation-fill-mode Определяет стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания).
animation-play-state Определяет будет ли анимация проигрываться или будет оставаться в режиме паузы.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Подключаем анимацию к элементу <div> при помощи универсального свойства


div {
     -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
     animation: mymove 5s infinite;
}