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