Use hardware acceloration?

Question

How to force the browser to use hardware acceleration for 2d & other animation in CSS?

Answer 1

use css compressor?

Answer 2

@jakub konkel: no i mean using GPU for 2d animation & transitions instead of CPU

Answer 3

Since the redrawing of elements is a heavier and more expensive opration. browsers use from a layer model for drawing elements. when an opration transfer to the GPU browser make a separate layer for the opration and its element an it cause to run the opration faster and smoothly also prevent from redrawing of mentioned element and other elements.
All animations & transitions automatically don't move to the GPU but some animations like opacity, transform (3D transforms with animation) & filter also video and canvas will transfer to GPU automatically.
But what we can do for 2D transforms & other animations?
We must confuse browser to think the element has 3D draws so browser will move it to the GPU and run it.
But how can we do?
look at this code:

#element {
transform: translate3d(0,0,0)
/*other transforms*/
}

when browser encounters with this code quickly it will move the element to the GPU for smoothly runing but in principle there is no 3D oprations.

Answer 4

@jakub konkel:
I mean hardware acceleration for animated elements (use GPU beside CPU)