CSS-анимации

CSS-анимации позволяют плавно изменять свойства элементов без использования JavaScript. Они описываются через правило @keyframes и свойство animation. Это один из самых распространённых способов оживить интерфейс.

Как это работает?

Анимация в CSS состоит из двух частей:

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

Свойства animation

Основные свойства, которые управляют анимацией:

• animation-name — имя анимации (из @keyframes)
• animation-duration — длительность (например, 1s)
• animation-timing-function — функция плавности (ease, linear, ease-in-out)
• animation-delay — задержка перед началом
• animation-iteration-count — количество повторений (infinite для бесконечных)
• animation-direction — направление (normal, reverse, alternate)
• animation-fill-mode — состояние до/после (forwards, backwards, both)

Пример: пульсация

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

.element {
  animation: pulse 1.5s ease-in-out infinite;
}