CSS animation makes screen explode

I’ve been diving into CSS animations with 3D transforms lately, and sometimes weird stuff is happening:

Where are those grey “rays” coming from and why do they go beyond the browser window (I’m using Chrome)? What on earth is going on there?

IDK whats wrong with this but i wanna try it tho :joy: can you put up this on CodePen ?

I’ve made one here:

It runs fine in Firefox. In Chrome, there’s already something weird if the ball turns normal, but if you click the button to change the rotation animation, stuff totally gets out of control, especially if the mouse isn’t in the window (moving the mouse over it seems to reset things to normal sometimes).

Is that a thing with my graphics hardware? I don’t even know how to google this.

I don’t know what is happening! But go to this link to find out the errors. https://validator.w3.org/#validate_by_input

That’s odd @jsdisco. I’m not able to replicate this on my MacBook Pro running the latest version of Chrome.

I also copied your code to a local file just in case because sometimes codepen can be forgiving but even locally it runs as expected.
I tabbed into it to change the rotation since you said the mouse being in the window sometimes corrected the issue.