CSS предлагает два основных способа анимации: transition для плавных переходов между состояниями и animation для сложных многократных эффектов. Transition работает при изменении свойств элемента, а animation использует ключевые кадры (keyframes) для контроля над всем процессом. Выбор зависит от сложности задачи: transition для hover-эффектов и простых изменений, animation — для циклических и составных анимаций.
CSS transition: плавные переходы
Transition активируется при изменении значения CSS-свойства. Работает по принципу: было значение А, стало значение Б — браузер плавно интерполирует промежуточные состояния. Основные свойства:
- : указывает, какое свойство анимировать (width, opacity, transform)
- : длительность анимации в секундах или миллисекундах
- : функция скорости (ease, linear, ease-in-out)
- : задержка перед началом анимации
Пример кнопки с hover-эффектом:
.button { background-color: blue; transition: background-color 0.3s ease;
} .button:hover { background-color: darkblue;
}Transition срабатывает только при наличии триггера: изменение класса, состояния (:hover, :focus) или JavaScript. Не поддерживает автоматический запуск без внешнего воздействия.
CSS animation: ключевые кадры
Animation основана на keyframes — наборе правил, определяющих состояния элемента в различные моменты времени. Позволяет создавать сложные многократные анимации без постоянных триггеров.
Создание анимации включает два этапа: определение keyframes и применение к элементу.
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }
} .element { animation: pulse 2s infinite;
}Основные свойства animation:
- : название keyframes
- : длительность цикла
- : функция скорости
- : задержка перед первым запуском
- : количество повторений (infinite для бесконечности)
- : направление (normal, reverse, alternate)
- : поведение до и после анимации
- : пауза/воспроизведение
Сравнение transition и animation
| Критерий | ||
|---|---|---|
| Сложность анимации | Простая (два состояния) | Сложная (множество состояний) |
| Запуск | Только при изменении свойства | Автоматически или по триггеру |
| Повторение | Однократно | Многократно (включая бесконечно) |
| Обратное воспроизведение | Автоматически при отмене триггера | Требует отдельной настройки |
| Контроль промежуточных состояний | Ограниченный | Полный (через keyframes) |
Transition идеален для: hover-эффектов, плавного появления/исчезновения, простых изменений размера или цвета. Animation подходит для: загрузочных индикаторов, циклических анимаций, сложных последовательностей.
Типичные ошибки и ограничения
Обе технологии имеют специфические ограничения, которые важно учитывать при разработке.
Производительность: Анимация свойств, вызывающих перерасчёт layout (width, height, margin), значительно медленнее, чем transform и opacity. Всегда предпочитайте transform для перемещений и масштабирования.
Совместимость: Не все свойства одинаково хорошо анимируются в разных браузерах. Особенно внимательно тестируйте сложные анимации в мобильных браузерах.
Доступность: Избегайте мигающих анимаций (более 3 раз в секунду) — они могут вызывать приступы у людей с фотосенситивной эпилепсией. Предусматривайте возможность отключения анимаций через prefers-reduced-motion.
Распространённые ошибки:
- Забывают указать transition-duration — анимация не работает
- Пытаются анимировать display: none → display: block (используйте opacity + visibility)
- Создают анимации, блокирующие основной поток рендеринга
- Не учитывают накопление погрешности при бесконечных анимациях
Практическое правило: начинайте с transition для простых задач и переходите к animation только когда нужен полный контроль над процессом. Всегда тестируйте анимации на реальных устройствах, особенно на мобильных.