Разница между свойствами transition и animation в CSS заключается в том, для каких задач они используются. 15

Transition (переход) предназначен для создания плавного перехода элемента от одного состояния к другому. 1 Обычно движение запускается по определённому сигналу, например, по клику или наведению курсора. 3 Transition имеет начальное и конечное состояние, и его легче создавать и управлять. 1

Animation (анимация) подходит для более сложной последовательности передвижений. 1 В отличие от transition, анимация позволяет переходить через промежуточные этапы и даёт больше контроля над порядком изменения состояния. 1 Для анимации нужен набор ключевых кадров (keyframes), которые описывают стили элемента в определённые моменты времени. 2

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