How to GPU accelerate CSS transform?

Question

I know that sometimes browsers will GPU accelerate a CSS transform. But when does that happen, and is there a way to force GPU acceleration for a smooth animation?

this article

Answer 1

Most modern browsers support GPU acceleration, but they only use it when they think a DOM element will benefit from it. The strongest indication is that a 3D transformation is being applied. So use the 3D-equivalent transform. For example, instead of transform: translateX(50px), use transform: translate3d(50px, 0, 0). See this article for more information.

Answer 2

You can use the css "will-change" property:

will-change: transform;

Some css properties which are GPU accelerated (not always):

• filter
• opacity
• transform