Перекрещиваются ли css-переходы с нулевым временем аппаратного ускорения?

Question

Учитывая следующий цикл анимации:

var element = document.getElementById('myElement'), 
    left = 0; 

element.style.transition = 'translate 0s linear'; 

function loop() { 
    left++; 
    element.style.transform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,' + left + ',0,0,1)'; 
    requestAnimationFrame(loop); 
} 

Будет ли анимация еще прибыль от аппаратно-accelleration, как это было бы, если один чисто используются CSS переходы? Кроме того, какое влияние на окружающую среду (браузер, версия, операционная система) на это?

(Вышеупомянутый код предназначен только для того, чтобы дать вам представление о том, что я получаю. Он не предназначен для использования в производстве. Обычно я, конечно же, был бы резервным для requestAnimationFrame(), реализовать способ управлять анимацией и т. д.)

Answer 1

Попробуйте отладить это в Chrome. Вы можете выбрать флаг в Инструментах инспекторов, чтобы рисовать прямоугольники вокруг объектов, которые нарисованы. Когда элемент аппаратно ускоряется, он не будет отображаться как область рисования. Отсутствие красных красных прямоугольников вокруг вашего элемента указывает на то, что аппаратное ускорение.