Why does css animation slow down when loading content in a frame?

Question

css

Hello!
I am writing a small application on node-webkit. The main function is to display the desired site in a frame expanded to full screen. During the loading of pages in the frame, a css animation is displayed on top of it - they say, the page is loading. It turns out, in fact, such a browser in a browser :)
The problem is that during the loading of css content, the animation starts to slow down a lot for several seconds. Either because of page rendering, or because of javascript, or because of loading content on the page.
Does anyone know how to overcome this? Or useless?
I sketched an example: jsfiddle.net/jn71Lwp3/1 - can be viewed in webkit browsers.

Answer 1

try adding the following property to the animated block:
This property forces graphics hardware acceleration to be enabled. But I'm not sure it's a panacea.

Answer 2

10 seconds slows down, js would be faster. designers solve this problem by introducing delays as part of the animation, for example, small cubes in a row, the smartest ones generally refuse stupid twists that interfere with the eyes and brains and use text.