Отличие свойства animation от transition

Оба свойства используются для создания плавных изменений, но решают разные задачи.

CSS Transition (Переход)

Переход — это анимация между двумя состояниями элемента.

• Что делает: Плавно интерполирует значение CSS-свойства от начального до конечного значения.

• Запуск: Требует внешнего события-триггера, такого как :hover, :focus, добавление/удаление класса через JavaScript.

• Контроль: Управляет только изменением между состояниями. Не может повториться или создать сложную последовательность.

• Синтаксис: Указывается для конкретного свойства или all.

/* Простой переход для фона */
.box {
  background: blue;
  transition: background-color 0.5s ease-in-out; /* Свойство | Длительность | Функция */
}

.box:hover {
  background: red; /* При наведении фон плавно станет красным */
}

CSS Animation (Анимация)

Анимация — это последовательность кадров, управляемая через правило @keyframes.

• Что делает: Воспроизводит заранее определенную цепочку стилей (keyframes), которая может содержать множество промежуточных состояний.

• Запуск: Может запускаться автоматически при загрузке страницы или по событию, но не привязана к нему жестко.

• Контроль: Предоставляет полный контроль над временной шкалой: задержка (animation-delay), количество повторений (animation-iteration-count), направление (animation-direction), состояние (animation-play-state).

• Синтаксис: Связывает элемент с набором @keyframes.

/* Бесконечная пульсирующая анимация */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.element {
  animation: pulse 2s infinite; /* Имя | Длительность | Количество повторов */
}

Вывод

Используйте transition для простых, однонаправленных изменений, привязанных к событиям (наведение, фокус). Используйте animation для более сложных, автономных и многократных эффектов, которые требуют точного контроля над каждым этапом.