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

Question

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

YeaHub · Accepted Answer

Оба свойства используются для создания плавных изменений, но решают разные задачи.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 для более сложных, автономных и многократных эффектов, которые требуют точного контроля над каждым этапом.