CSS: ускорен ли переход: левый / верхний графический процессор?

Question

Я знаю, что вы можете заставить ускорение графического процессора добиться плавной анимации элементов по всему экрану, применив переход к свойству 'transform', например ::

elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';

Но мне было интересно, что произойдет, если вы замените вторую строку на:

elem.style.left = '600px'; 

Будет ли ускорение графического процессора задействовать свойство "left" (или "top") или оно должно быть в свойстве transform? Мне кажется, что это должно быть ускорение GPU, но я не могу найти окончательный ответ из любой документации, которую я прочитал.

Answer 1

Это не ускоряется. Вы должны использовать определенные свойства CSS3 для ускорения. Я думаю, вы найдете эти ссылки интересными:

http://www.html5rocks.com/en/tutorials/speed/html5/

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Анимация значения преобразования CSS3 с помощью javascript исключает аппаратное ускорение?

Answer 2

Я достиг консенсуса в том, что только свойство translate3d аппаратно ускоряется на мобильных устройствах, таких как Mobile Safari.

Дополнительная информация .