Карточка Middle Анимации спрашивают часто обновлено
Свойства только для композитинга
Вопрос
Какие CSS-свойства обычно анимируются без layout и paint?
Попробуйте сами
Ответьте про себя или вслух, потом откройте ответ и сверьтесь.
Показать ответ и разбор
Коротко
transform и opacity. Их изменение браузер может применить на этапе composite к готовому слою, часто на потоке композитора, не дёргая главный поток.
Ответ
transform и opacity. Их изменение браузер может применить на этапе composite к готовому слою, часто на потоке композитора, не дёргая главный поток.
Разбор
Отсюда правило: двигаем через translate, масштабируем через scale, прячем через opacity.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «Анимации»
- Функция времени steps()
- Web Animations API
- Какие свойства анимировать дёшево
- Почему элемент возвращается после анимации
- Анимация раскрытия до height: auto
- requestAnimationFrame против setInterval
- Как учесть настройку «уменьшить движение»
- Два времени в шортхенде transition