问题
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
回答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.
回答2:
You can use the css "will-change" property:
will-change: transform;
Some css properties which are GPU accelerated (not always):
- filter
- opacity
- transform
来源：https://stackoverflow.com/questions/32614455/how-to-gpu-accelerate-css-transform