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

Question

[wqertAnna]

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

Comments

[Сергей delphinpro]

трансформации

[Rustam Bainazarov]

Для таких случаев transform лучше всего, он не вызывает repaint. Так ещё GPU-ускорение к нему можно применить, если надо.

Update. А, LOL, ну вот вы сами и ответили на вопрос.

[Ярослав]

Однозначно transform.

Answer 1

[wqertAnna]

Кажется, я перепутала и всё наоборот.

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

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

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

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

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