Свойство animation используется для создания анимации, например движения, изменения цвета, поворотов, изменения размера элементов. animation определяет набор ключевых кадров — keyframes, которые описывают, как изменяется свойство элемента со временем.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Синтаксис

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

Наследование

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

Значения свойства

Значения animation могут быть комбинацией следующих параметров:

animation-name

Определяет название анимации, которое соответствует определенной группе ключевых кадров — @keyframes.

animation-duration

Задаёт продолжительность анимации в секундах или миллисекундах.

animation-timing-function

Определяет временную функцию, которая контролирует скорость и характер изменений во время анимации. Значения:

linear — анимация происходит с постоянной скоростью.

Пример анимации с постоянной скоростью

ease — значение по умолчанию, которое начинается медленно, затем ускоряется и замедляется в конце.

Пример анимации, которая начинается медленно, ускоряется и в конце замедляется

ease-in — начинается медленно и потом ускоряется.

Пример анимации, которая начинается медленно и потом

ease-out — начинается быстро и замедляется к концу.

Пример анимации, которая начинается быстро и замедляется к концу

ease-in-out — начинается медленно, затем ускоряется, а потом замедляется.

Пример анимации, которая начинается медленно, затем ускоряется, а потом замедляется

animation-delay

Задаёт задержку перед началом анимации в секундах или миллисекундах.

Пример анимации с задержкой в 3 секунды

animation-iteration-count

Определяет количество повторений анимации. Значения:

— infinite — анимация повторяется бесконечно. — Числовые значения — указывают конкретное количество повторений.

animation-direction

Определяет направление анимации. Распространенные значения:

normal — проигрывается в прямом направлении.

Пример анимации, которая.проигрывается в прямом направлении

reverse — проигрывается в обратном направлении.

Пример анимации, которая проигрывается в обратном направлении

alternate — проигрывается в прямом и обратном направлениях чередуясь.

Пример анимации, которая проигрывается в прямом и обратном направлениях чередуясь

animation-fill-mode

Определяет стили, применяемые к элементу до и после анимации. Распространенные значения:

none — стили элемента не изменяются до или после анимации.

Пример анимации

forwards — элемент сохраняет стили последнего кадра после окончания анимации.

Пример анимации

backwards — элемент применяет стили первого кадра до начала анимации.

Пример анимации

animation-play-state

Определяет состояние анимации: остановлена или воспроизводится. Значения:

  • running — анимация воспроизводится.
  • paused — анимация остановлена.

Пример использования

Создадим анимацию с именем myAnimation, которая изменяет прозрачность элемента от полностью прозрачного — opacity: 0, до полностью видимого — opacity: 1, а затем снова до полностью прозрачного. Анимация будет повторяться бесконечно — infinite и длиться 3 секунды — 3s.

<head>
  <style>
    @keyframes myAnimation {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    .element {
      animation: myAnimation 3s infinite;
    }
  </style>
</head>
<body>
  <div class="element">Пример элемента с анимацией</div>
</body>

@keyframes myAnimation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.element {
  animation: myAnimation 3s infinite;
}
Пример анимации

⭐ Поддержка браузерами свойства animation

Нюансы использования

  • Быстрые анимации: если анимация слишком быстрая, пользователи могут не успеть заметить и оценить изменения, особенно если они происходят на важных элементах интерфейса.
  • Много анимаций на странице: слишком много анимаций на одной странице может привести к перегрузке и замедлению производительности.

Материалы по теме