wqertAnna
@wqertAnna

Изменения каких свойств при анимации являются более оптимизированными? transform: translate или top (position: relative)?

Есть обычный блок, при hover он немного перемещаться наверх, и появляется тень.
Обычно всегда делала это с помощью transform: translate, а сейчас задумалась, какое решение более оптимизировано. Слышала, что transform одно из весьма затратных свойств. Может лучше использовать свойства смещения при относительном позиционировании?
Или не имеет значения?
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
wqertAnna
@wqertAnna Автор вопроса
Кажется, я перепутала и всё наоборот.


1. Макет (layout)
2. Отрисовка (paint)
3. Композиция (composite)

Эти термины имеют отношение к рендерингу в браузере, но они важны, потому что некоторые свойства CSS влияют на различные шаги конвейера рендеринга.

Если вы измените свойство CSS, которое не затрагивает ни макет, ни отрисовку, то браузеру остаётся сделать только композицию.
Для подробной информации, какие процессы запускают различные свойства CSS, см. триггеры CSS

________________________________________________
статья
Начиная от заголовка Макет, отрисовка и композиция

свойство top влияет на все 3 шага конвейера
свойство transform в некоторых браузерах на 3 шага, в других же только на 1
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы