Animation play state not working on Safari

Question

I don't know whats wrong but every bug I am coming across is Safari related and its very annoying. I have a code in my website that when a users mouse is not on the body of the page, like in another tab or physically not on the page, the circle animations pause and when the users mouse returns on the body again the css animation resumes where it left off. It works perfectly on Chrome, Firefox....But on Safari... It has this blue background that popup when you leave the body, and when you return it goes crazy and starts all colors at once. Sometimes it won't even start after its done and you have to refresh. Here is are gifs I recorded.

When the blue background comes:

https://gyazo.com/1d063cb8ccce17481df858330b5c8a80

When all the colors start at once:

https://gyazo.com/9b77fe0746c34aeae73af970aec9e75b

How its suppose to look

https://gyazo.com/cdcebb77327b166d0995b2598938e6d7

Here is my code.

Code pen https://codepen.io/anon/pen/dWvwKR

Java Script

$("body").on("mouseleave",function(){
                    console.log("MOUSE IS OUT");
                    $("#firstCircle").css({"animation-play-state":"paused"});
                    $("#firstCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#firstCircle").css({"-ms-animation-play-state":"paused"});
                    $("#firstCircle").css({"-moz-animation-play-state":"paused"});
                    $("#firstCircle").css({"-o-animation-play-state":"paused"});

                    $("#secondCircle").css({"animation-play-state":"paused"});
                    $("#secondCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#secondCircle").css({"-ms-animation-play-state":"paused"});
                    $("#secondCircle").css({"-o-animation-play-state":"paused"});
                    $("#secondCircle").css({"-moz-animation-play-state":"paused"});

                    $("#thirdCircle").css({"animation-play-state":"paused"});
                    $("#thirdCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#thirdCircle").css({"-ms-animation-play-state":"paused"});
                    $("#thirdCircle").css({"-moz-animation-play-state":"paused"});
                    $("#thirdCircle").css({"-o-animation-play-state":"paused"});

                    $("#fourthCircle").css({"animation-play-state":"paused"});
                    $("#fourthCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#fourthCircle").css({"-moz-animation-play-state":"paused"});
                    $("#fourthCircle").css({"-o-animation-play-state":"paused"});
                    $("#fourthCircle").css({"-ms-animation-play-state":"paused"});

                    $("#fifthCircle").css({"animation-play-state":"paused"});
                    $("#fifthCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#fifthCircle").css({"-ms-animation-play-state":"paused"});
                    $("#fifthCircle").css({"-moz-animation-play-state":"paused"});
                    $("#fifthCircle").css({"-o-animation-play-state":"paused"});

                    $("#sixthCircle").css({"animation-play-state":"paused"});
                    $("#sixthCircle").css({"-webkit-animation-play-state":"paused"});
                    $("#sixthCircle").css({"-o-animation-play-state":"paused"});
                    $("#sixthCircle").css({"-moz-animation-play-state":"paused"});
                    $("#sixthCircle").css({"-ms-animation-play-state":"paused"});
                    });


                    $(window).on("mouseenter",function(){
                    console.log("MOUSE IS IN");
                    $("#firstCircle").css({"animation-play-state":"running"});
                    $("#firstCircle").css({"-webkit-animation-play-state":"running"});
                    $("#firstCircle").css({"-ms-animation-play-state":"running"});
                    $("#firstCircle").css({"-moz-animation-play-state":"running"});
                    $("#firstCircle").css({"-o-animation-play-state":"running"});

                    $("#secondCircle").css({"animation-play-state":"running"});
                    $("#secondCircle").css({"-webkit-animation-play-state":"running"});
                    $("#secondCircle").css({"-ms-animation-play-state":"running"});
                    $("#secondCircle").css({"-moz-animation-play-state":"running"});
                    $("#secondCircle").css({"-o-animation-play-state":"running"});

                    $("#thirdCircle").css({"animation-play-state":"running"});
                    $("#thirdCircle").css({"-webkit-animation-play-state":"running"});
                    $("#thirdCircle").css({"-ms-animation-play-state":"running"});
                    $("#thirdCircle").css({"-moz-animation-play-state":"running"});
                    $("#thirdCircle").css({"-o-animation-play-state":"running"});

                    $("#fourthCircle").css({"animation-play-state":"running"});
                    $("#fourthCircle").css({"-webkit-animation-play-state":"running"});
                    $("#fourthCircle").css({"-ms-animation-play-state":"running"});
                    $("#fourthCircle").css({"-moz-animation-play-state":"running"});
                    $("#fourthCircle").css({"-o-animation-play-state":"running"});

                    $("#fifthCircle").css({"animation-play-state":"running"});
                    $("#fifthCircle").css({"-webkit-animation-play-state":"running"});
                    $("#fifthCircle").css({"-ms-animation-play-state":"running"});
                    $("#fifthCircle").css({"-moz-animation-play-state":"running"});
                    $("#fifthCircle").css({"-o-animation-play-state":"running"});

                    $("#sixthCircle").css({"animation-play-state":"running"});
                    $("#sixthCircle").css({"-webkit-animation-play-state":"running"});
                    $("#sixthCircle").css({"-ms-animation-play-state":"running"});
                    $("#sixthCircle").css({"-moz-animation-play-state":"running"});
                    $("#sixthCircle").css({"-o-animation-play-state":"running"});
                    });


            });

Answer 1

Hi @thatoneguy90 that's because Safari pauses JS on inactive tabs after 1000ms (1s) to preserve CPU. You'll need to work around the automatic pausing of setInterval and requestAnimationFrame. This could also be causing the blue color when you roll outside the viewport.

Definitely visit this one for a JS example of how to make this work:
How can I make setInterval also work when a tab is inactive in Chrome?

You might also find this helpful for more info on the topic:
How do browsers pause/change Javascript when tab or window is not active?

Additionally, if this is close to the final result, you can probably achieve this using CSS as well.