Why Hardware-accelerated Css Animation Cost Too Much "composite Layer" Times In Main Thread?

I use a big picture(33440 x 440) and transform the big image, then achieve a animation like as frame animation; and also I use the translate3D to get a GPU Acceleration, simplified

Solution 1:

The problem is that your image is HUGE. "Compositing layers" roughly means rendering all of the elements (layers) on the page on top of each other in the correct order and location, which will take a long time if these layers are gigantic. Just because it's happening on the GPU doesn't mean it will happen instantly if you throw a 14 megapixel image into it.