transition сглаживает изменение CSS‑свойства между двумя состояниями элемента и всегда требует внешнего триггера (например, псевдокласс :hover или смену класса). animation использует ключевые кадры @keyframes, может описывать много промежуточных состояний, запускаться автоматически и зацикливаться. Обычно простые одношаговые эффекты делают через transition, а сложные и многошаговые — через animation.
И transition, и animation нужны для анимации CSS‑свойств, но решают разные задачи и по-разному управляются во времени.
transition срабатывает только в ответ на изменение значения свойства: наведение (:hover), фокус, добавление/удаление класса, изменение inline‑стиля, срабатывание медиазапроса и т.п. Без изменения стиля анимации не будет. animation может стартовать сама при загрузке страницы, после задержки (animation-delay) или по добавлению класса и не требует «переключения» значения свойства в момент старта.transition анимирует переход только между двумя состояниями: «до» и «после». animation задаётся через @keyframes, где можно описать сколько угодно промежуточных кадров (например, 0%, 30%, 60%, 100%), получая сложную временную шкалу.transition нет встроенного цикла — он просто проигрывается при каждом изменении состояния. У animation есть свойства animation-iteration-count, animation-direction, animation-delay, animation-fill-mode, что позволяет организовывать бесконечные или сложные циклы и управлять поведением после завершения анимации.transition проще: указываем, какие свойства анимировать, за сколько времени и с какой функцией тайминга. animation даёт больше контроля (разные состояния во времени, разные эффекты на разных участках анимации), но требует описания ключевых кадров.transition. Если нужно сделать сложную, многошаговую или бесконечную анимацию (лоадеры, пульсирующие элементы, двигающиеся баннеры, сложные микровзаимодействия) — подойдёт animation с @keyframes.На собеседовании важно явно проговорить: transition — это реакция на изменение стиля между двумя состояниями, а animation — полноценная временная шкала с ключевыми кадрами и расширенными настройками поведения.
Ниже пример, где transition используется для плавного эффекта наведения на кнопку: меняется фон и лёгко смещается сама кнопка.
А здесь пример с animation и @keyframes: квадратный лоадер периодически «пульсирует», меняя масштаб и прозрачность, анимация зациклена и идёт без участия пользователя.
Отметьте свой прогресс