Свойство 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. На пръв поглед, всичко е наред, но анимацията не работи, тъй като reverse е валидна ключова дума за свойството animation-direction.

Също така анимацията няма да работи при използване в кратка форма в името на други ключови думи. Но всичко работи добре при използване на "пълна" форма на описание.

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

Вижте също