Анимации и transitions
↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая
Зачем это на собесе
Ждут знания, какие свойства анимировать дёшево (
transform,opacity) и почему.
Объяснение
Transition — плавный переход между состояниями; Animation — сценарий на @keyframes.
.btn { transition: transform .2s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-2px); background-color: var(--accent); }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.badge { animation: pulse 1.5s ease-in-out infinite; }
.fade-in { animation: fade .3s ease both; } /* both: сохранить начальное/конечное состояние */| Параметр | Значения |
|---|---|
transition-property | какие свойства |
transition-duration, animation-duration | длительность |
timing-function | ease, linear, ease-in-out, cubic-bezier(), steps() |
delay, iteration-count, direction, fill-mode | задержка, повторы, направление, состояние |
Производительность: браузер выполняет transform и opacity на композиторе (GPU) без layout/paint; анимация width, top, margin, box-shadow вызывает reflow/repaint и «лаги».
Пайплайн рендера: Layout → Paint → Composite. Стремитесь к Composite-only анимациям.
Подсказка will-change: transform — точечно и временно. Уважайте prefers-reduced-motion.
JS-анимации: Web Animations API (el.animate()), requestAnimationFrame; библиотеки (GSAP). Во Vue — <Transition>/<TransitionGroup>.
Нюансы и подводные камни
display: noneнельзя плавно анимировать обычным transition (используйтеopacity+visibilityили@starting-style/allow-discrete).will-changeна всё подряд расходует память.- Анимации не должны мешать доступности (мигание > 3 раз в секунду опасно).
- Transition срабатывает только при изменении значения между двумя состояниями.
Практика
- Сравните анимации
leftиtransform: translateXв Performance. - Сделайте плавное появление модального окна с
opacity/transform. - Отключите анимации при
prefers-reduced-motion.
Вопросы с ответами
Какие свойства анимировать дёшево?
transformиopacity: они не вызывают layout и обрабатываются на GPU.
Чем transition отличается от animation?
Transition — переход между двумя состояниями по триггеру; animation — многошаговый сценарий на
@keyframes.