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