title: Animation play state not working on Safari
body: <p>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.</p>
  
  <p>When the blue background comes: </p>
  
  <pre><code>https://gyazo.com/1d063cb8ccce17481df858330b5c8a80
  </code></pre>
  
  <p>When all the colors start at once:</p>
  
  <pre><code>https://gyazo.com/9b77fe0746c34aeae73af970aec9e75b
  </code></pre>
  
  <p>How its suppose to look</p>
  
  <pre><code>https://gyazo.com/cdcebb77327b166d0995b2598938e6d7
  </code></pre>
  
  <p>Here is my code.</p>
  
  <p>Code pen
  <a href="https://codepen.io/anon/pen/dWvwKR" rel="nofollow noreferrer">https://codepen.io/anon/pen/dWvwKR</a></p>
  
  <p>Java Script</p>
  
  <pre><code>$("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"});
                      });
  
  
              });
  </code></pre>