Чем отличаются свойства CSS animation и transition?

Чем отличаются свойства CSS animation и transition?

• Область применения: CSS-переходы и анимация
• transition выполняет плавное изменение между двумя значениями свойства при его смене
• animation описывает многоэтапную анимацию с несколькими ключевыми кадрами (keyframes)
• transition обычно запускается изменением состояния, например hover или focus, а animation может выполняться циклично или многократно
• animation позволяет задавать через keyframes тайминг, число повторов, направление и задержку
• transition проще и подходит для базовых эффектов, тогда как animation предназначена для сложных и повторяющихся движений
• Практическое применение: transition используют для hover-эффектов, animation — для сложных интерактивных UI/UX-анимаций

Подробный ответ

Основной ответ

Свойства animation и transition в CSS служат для создания визуальных изменений, но отличаются уровнем контроля и принципом работы. transition плавно переводит CSS-свойство из одного состояния в другое, например при hover. animation задаёт последовательность изменений с несколькими ключевыми кадрами, повторениями, задержками и направлениями.

Ключевые моменты

• Transition описывает переход от текущего состояния стилей к следующему и не предназначен для цикличных или многоэтапных сценариев. Поэтому его обычно выбирают для простых эффектов, например плавной смены цвета или позиции при действии пользователя.
• Animation работает с @keyframes и позволяет описать несколько состояний с точным управлением временными точками, количеством повторов (animation-iteration-count), направлением (animation-direction) и задержками. Такая анимация меньше зависит от внешнего события и поддерживает более сложные эффекты.
• С точки зрения производительности transition обычно легче для браузера и быстрее при простых изменениях. animation потребляет больше ресурсов, зато предоставляет полный контроль над сложными и цикличными сценариями.

Практический контекст

В React 18 при наведении на кнопку обычно выбирают transition, чтобы плавно изменить цвет или тень: запуском служит hover. Для сложного появления элементов при загрузке страницы применяют animation с несколькими ключевыми кадрами. В продакшн оба подхода часто комбинируют: transition оставляют для взаимодействий, а animation используют для фоновых и комплексных эффектов.