Transition и animation в CSS отличаются по своим возможностям и назначению. 13

Transition создаёт плавный переход от одного состояния к другому. 1 Для запуска переходов нужны триггеры, например наведение указателя мыши на элемент. 2 Переход имеет только два состояния: начальное и конечное, промежуточные этапы создать нельзя. 2 Запускается только один раз. 2 Подходит для базовых изменений стиля. 2

Animation анимирует изменение стиля от одной ключевой кадры к другой. 2 Для анимации триггеры не нужны. 2 Анимация позволяет создать несколько состояний, можно запустить несколько итераций анимации — даже до бесконечности. 2 Подходит для динамических изменений стиля. 2

Таким образом, transition используется для простых переходов от одного состояния к другому, а animation — для более сложной последовательности движений. 13