Справочник CSS

CSS animation: движение через @keyframes

CSS-анимация переключает набор состояний, описанных в @keyframes. В отличие от transition, она может запускаться сама, повторяться и содержать несколько промежуточных этапов.

Рабочий пример

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.badge { animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .badge { animation: none; }
}

Краткая запись animation объединяет имя, длительность, функцию времени, задержку и количество повторов. transform и opacity обычно анимируются плавнее свойств, влияющих на раскладку.

Когда применять

Анимация должна объяснять изменение состояния, а не мешать чтению. Бесконечные эффекты оставляй только для действительно активного процесса.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Анимировать width и left без необходимости
• Не учитывать prefers-reduced-motion
• Запускать сразу много бесконечных эффектов