Для перемещения элемента по экрану есть два основных способа:
- CSS 2D-преобразования и
translate()
; position:absolute
и изменениеtop/left
.
Крис Койер недавно писал, почему лучше и логичнее использовать translate
(это быстрее, и свойство position
имеет большее отношение к вёрстке, а не к визуальным эффектам и анимации, в отличие от translate
).
Я хочу расширить его ответ и привести несколько хороших примеров. Я записал скринкаст, в котором помощью Chrome DevTools timline рассматриваю различия между этими подходами с точки зрения производительности, особенностей рендеринга и композитинга на GPU.
Если вам нужна сокращённая текстовая версия — продолжайте читать.Читать полностью »