Are css transitions with a duration of zero still hardware accelerated?

Question

Given the following animation loop:

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);
}

Will the animation still profit from hardware-accelleration, like it would if one purely used css transitions? Also, what influence does the environment (Browser, version, operating system) have on that?

(The above code is merely meant to give you an idea of what I'm getting at. It isn't meant to be used in production. Normally I would of course us a fallback for requestAnimationFrame(), implement a way to control the animation and so forth.)

Answer 1

Try debugging this in Chrome. You can select a flag in the Inspector Tools to draw rectangles around objects being painted. When an element is hardware accelerated, it won't appear as a draw region. An absence of red paint rectangles around your element would indicate it's hardware accelerated.