How to restart css animation when user opens a new tab or is inactive in the website

Question

I have css animation that are set on an interval to show themselves and preform when a certain time has passed. It works perfectly when you are on the website however, when you leave the website and open a new tab and come back after a couple seconds, the animation seems to restart and all the circles start all at once.

For my question, I am asking how do you set the circles to restart when the user opens a new tab and come back. Just open the codepen I will have below, open a new tab, and come back after a couple seconds and you will see the circles start all together. My code will be posted below.

Codepen

jQuery

$("#secondCircle").hide();
                setInterval(function() {
                    $("#secondCircle").show();
                    $("#secondCircle").css("background-image", "linear-gradient(to top, #feada6 0%, #f5efef 100%)");
                },3400);

                $("#thirdCircle").hide();
                setInterval(function() {
                    $("#thirdCircle").show();
                    $("#thirdCircle").css("background-image", "linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)");
                },7430);

                $("#fourthCircle").hide();
                setInterval(function() {
                  $("#fourthCircle").show();
                    $("#fourthCircle").css("background-color", "#fd3061");
                },11640);

                $("#fifthCircle").hide();
                setInterval(function() {
                   $("#fifthCircle").show();
                    $("#fifthCircle").css("background-image", "linear-gradient(to top, #cc208e 0%, #6713d2 100%)");
                },14000);

                $("#sixthCircle").hide();
                setInterval(function() {
                   $("#sixthCircle").show();
                    $("#sixthCircle").css("background-image", "linear-gradient(to top, #b224ef 0%, #7579ff 100%)");
                },20000);

CSS

 .bubbles{
                position: absolute;
                z-index:0;
                transform:translateZ(0);
                -webkit-transform: translateZ(0);
                -ms-transform: translateZ(0);
                -moz-transform: translateZ(0);
                -o-transform: translateZ(0);
            }
            .bubbles li{
                position: absolute;
                list-style: none;
                display: block;
                border-radius: 100%;
                animation: fadeAndScale 33s ease-in infinite;
                -ms-animation: fadeAndScale 33s ease-in infinite;
                -webkit-animation: fadeAndScale 26s ease-in infinite;
                -moz-animation: fadeAndScale 33s ease-in infinite;
                -o-animation: fadeAndScale 33s ease-in infinite;
                transition-timing-function: linear;
            }
            /* The first Circle animation------------------------------------------------------------------------------------------------ */
            .bubbles li:nth-child(1) {
                width: 1100px;
                height: 1100px;
                position: relative;
                bottom:500px;
                left: 400px;
                background-image: -webkit-linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
                background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
                animation-name: firstCircle;

            }
            /* Mozilla First Circle Animation */
         @keyframes firstCircle {
                     0% {
                        z-index: 100;
                        transform: scale(0);

                    }

                    100%{
                        z-index: 0;
                        transform: scale(50);

                    }
                }
            @-moz-keyframes firstCircle {
                 0% {
                    z-index: 100;
                    -moz-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -moz-transform: scale(50);

                }
            }
            /* Webkit First Circle Animation */
            @-webkit-keyframes firstCircle {
                 0% {
                    z-index: 100;
                    -webkit-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -webkit-transform: scale(50);


                }
            }
            @-ms-keyframes firstCircle {
                 0% {
                    z-index: 100;
                    -ms-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -ms-transform: scale(50);


                }
            }

             @-o-keyframes firstCircle {
                 0% {
                    z-index: 100;
                    -o-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -o-transform: scale(50);


                }
            }
            /* End first circle animation -------------------------------------------------------------------------------------- */

            /* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
            .bubbles li:nth-child(2) {
                width: 1100px;
                height: 1100px;
                position: absolute;
                left: 400px;
                bottom:200px; 
                animation-name: secondAnimation;

            }
            /* Webkit Second Animation */
            @-webkit-keyframes secondAnimation {
                   0% {
                    z-index: 100;
                    -webkit-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -webkit-transform: scale(50);


                }
            }

            /* Mozilla Second Animation */
            @-moz-keyframes secondAnimation {
                   0% {
                    z-index: 100;
                    -moz-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -moz-transform: scale(50);


                }
            }
            /* Ms Second Animation */
            @-ms-keyframes secondAnimation {
                   0% {
                    z-index: 100;
                    -ms-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -ms-transform: scale(50);


                }
            }

            @-o-keyframes secondAnimation {
                   0% {
                    z-index: 100;
                    -o-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -o-transform: scale(50);


                }
            }
            /* End of Second Circle ------------------------------------------------------------------------------------- */

            /*Begin of Third Circle ----------------------------------------------------------------------------------- */

            .bubbles li:nth-child(3) {
                width: 1100px;
                height: 1100px;
                position: absolute;
                left: 600px;
                bottom:320px; 
                animation-name: thirdAnimation;

            }
            /* Webkit Third Animation */
            @-webkit-keyframes thirdAnimation {
                  0% {
                    z-index: 100;
                    -webkit-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -webkit-transform: scale(50);


                }
            }
            /* Mozilla Third Animation */
            @-moz-keyframes thirdAnimation {
                  0% {
                    z-index: 100;
                    -moz-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -moz-transform: scale(50);


                }
            }
            /* MS Third Animation */
             @-ms-keyframes thirdAnimation {
                  0% {
                    z-index: 100;
                    -ms-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -ms-transform: scale(50);


                }
            }

            @-o-keyframes thirdAnimation {
                  0% {
                    z-index: 100;
                    -o-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -o-transform: scale(50);


                }
            }
            /* End of the Third Circle --------------------------------------------------------------------------------------------------------- */

            /* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */

            .bubbles li:nth-child(4) {
                width: 1100px;
                height: 1100px;
                position: absolute;
                left: 100px;
                bottom:180px; 
                animation-name: fourthAnimation;
            }
            /* Webkit Fourth Animation */
            @-webkit-keyframes fourthAnimation {
                  0% {
                    z-index: 100;
                    -webkit-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -webkit-transform: scale(50);

                }
            }
            /* Mozilla Fourth Animation */
             @-moz-keyframes fourthAnimation {
                  0% {
                    z-index: 100;
                    -moz-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -moz-transform: scale(50);

                }
            }
            /* MS Fourth Animation */
             @-ms-keyframes fourthAnimation {
                  0% {
                    z-index: 100;
                    -ms-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -ms-transform: scale(50);

                }
            }

            @-o-keyframes fourthAnimation {
                  0% {
                    z-index: 100;
                    -o-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -o-transform: scale(50);

                }
            }
            /* END of Fourth Animation ------------------------------------------------------------------------------------------------ */

            /* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
            .bubbles li:nth-child(5) {
                width: 1100px;
                height: 1100px;
                position: absolute;
                left: 500px;
                bottom:200px; 
                animation-name: fifthAnimation;
            }
            /* Webki Fifth Animation */
             @-webkit-keyframes fifthAnimation {
                   0% {
                    z-index: 100;
                    -webkit-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -webkit-transform: scale(50);


                }
            }
            @-moz-keyframes fifthAnimation {
                   0% {
                    z-index: 100;
                    -moz-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -moz-transform: scale(50);


                }
            }
            @-ms-keyframes fifthAnimation {
                   0% {
                    z-index: 100;
                    -ms-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -ms-transform: scale(50);


                }
            }

            @-o-keyframes fifthAnimation {
                   0% {
                    z-index: 100;
                    -o-transform: scale(0);

                }

                100%{
                    z-index: 0;
                    -o-transform: scale(50);


                }
            }
            /* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */

            /* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */

            .bubbles li:nth-child(6) {
                width: 1100px;
                height: 1100px;
                position: absolute;
                left: 700px;
                bottom:150px; 
                animation-name: sixthAnimation;
            }
            /* Webkit sixth animation */

            @-webkit-keyframes sixthAnimation {
                 0% {
                    z-index: 100;
                    -webkit-transform: scale(0);
                }
                100%{
                    z-index: 0;
                    -webkit-transform: scale(50); 
                }
            }
            /* Mozilla Sixth Animation */
            @-moz-keyframes sixthAnimation {
                 0% {
                    z-index: 100;
                    -moz-transform: scale(0);
                }
                100%{
                    z-index: 0;
                    -moz-transform: scale(50); 
                }
            }
            /* MS Sixth Animation */
            @-ms-keyframes sixthAnimation {
                 0% {
                    z-index: 100;
                    -ms-transform: scale(0);
                } 
                100%{
                    z-index: 0;
                    -ms-transform: scale(50); 
                }
            }

            @-o-keyframes sixthAnimation {
                 0% {
                    z-index: 100;
                    -o-transform: scale(0);
                } 
                100%{
                    z-index: 0;
                    -o-transform: scale(50); 
                }
            }

"Don't". There is zero reason to waste someone's CPU cycles on your animation when they're not looking at it. Instead, make your code stop running when the document blurs, and then resume when the document gains focus again. — Mike 'Pomax' Kamermans, Apr 17 '17 at 04:42
How can I make to to where when the user is not on the website, for it to pause ? — Jagr, Apr 17 '17 at 04:43
Unfortunately, this is not a directly solvable problem. You'll have to deal with the fact that browsers are going to drop your setInterval rate down to almost nothing... and even more restrictions are coming! — Brad, Apr 17 '17 at 04:43
This website that has a similar design to mine "https://indiez.io" has theirs set to what I am talking about. Because when I leave their site and come back, the bubbles seem to restart all over again. — Jagr, Apr 17 '17 at 04:49
Is it possible to restart it like that website when the user opens a new tab? — Jagr, Apr 17 '17 at 04:54
@thatoneguy90b what do you mean - either they've tabbed away, and your document will have received a `blur` event, with the user still "on" on the website just with your tab blurred (and when they come back your document will receive a `focus` event), or they closed the tab, in which case they really aren't on your website and what you want is irrelevant because *they are not on your website* =) — Mike 'Pomax' Kamermans, Apr 17 '17 at 04:54
My tab blurred? Sorry I am not to big on the technical words of web development. — Jagr, Apr 17 '17 at 05:02
add `if(paused)return;` to the top of each timer function, then use blur/focus to set the `paused` global — dandavis, Apr 17 '17 at 05:11

repzero · Answer 1 · 2017-04-17T05:50:50.540

3

You can add a handler to the window.focus and blur event

Example (resume the animation on focus)

$(window).blur(function(){
    $(".bubbles li").css({"animation-play-state":"paused"})
    })
$(window).focus(function(){
    $(".bubbles li").css({"animation-play-state":"running"})
    })

click here for demo

Edit

To restart the animation see demo: click here

Code below

$(window).blur(function() {
  $(".bubbles li").css({
    "animation-play-state": "paused"
  })

})
$(window).focus(function() {
  $(".bubbles li").each(function() {
    var clone = this.cloneNode(true);
    this.parentNode.replaceChild(clone, this);
    $(".bubbles li").css({
      "animation-name": "firstCircle"
    });
    $(".bubbles li").css({
      "animation-play-state": "running"
    })
  })


})

edited Apr 17 '17 at 05:50

answered Apr 17 '17 at 04:44

repzero

8,254
2
18
40

Click outside the iframe and you will see the animation is paused – repzero Apr 17 '17 at 04:45
Wait "Click outside the iframe"? What does that mean. And I tried and the circles still start at the same time again. – Jagr Apr 17 '17 at 04:46
my apologies..click inside the iframe and then outside..you should see the animation is paused.. – repzero Apr 17 '17 at 04:48
I tried this with a tab with a simple onblur and onfocus function and worked as expected – repzero Apr 17 '17 at 04:49
I see I see. From the comments above they told me its hard to achieve what I want so would you know how to restart the animation when user opens a new tab? – Jagr Apr 17 '17 at 04:50
In the demo when the user opens a tab the animation is paused when the user goes back to the window with the animation, the animation is resumed, you want the opposite? – repzero Apr 17 '17 at 04:51
Yes thats what I want but there is a bug because I have every circle set on an interval so because of that, when it gets paused, the time is still ticking and when the time for a certain circle to come, it shows when you come back to the site. And if the whole 24s of the animation passes, they all come up at once. – Jagr Apr 17 '17 at 04:53
Is it possible to restart the animation when the user opens a new tab? – Jagr Apr 17 '17 at 04:54
its still doing the same thing D: – Jagr Apr 17 '17 at 04:56
So you want to pause it when window is changed and then when you return to the window restart it? – repzero Apr 17 '17 at 04:58
Yes I want it to restart when they return – Jagr Apr 17 '17 at 05:01
I checked and its the same D: – Jagr Apr 17 '17 at 05:05
Please take you time :D – Jagr Apr 17 '17 at 05:07
you might have to remove the li elements and re-inject them... see this link http://stackoverflow.com/questions/6268508/restart-animation-in-css3-any-better-way-than-removing-the-element . Add a class to all you li tags, clone them, take them out of the dom and replace them. finally add back your animation – repzero Apr 17 '17 at 05:27
Close close but I want it to restart as in from the beginning. When I leave and come back, all 3 circles come at the same time – Jagr Apr 17 '17 at 06:09
It does..click inside wait 5 sec when the animation , click outside the iframe, you will see it is paused. finally click inside the iframe you will see it is being restarted..I am out for now... – repzero Apr 17 '17 at 12:35
I did D: We all did. Its still the same.. I left and came back and all the circles came at me all at once. – Jagr Apr 18 '17 at 00:45

Louys Patrice Bessette · Answer 2 · 2017-04-17T17:25:59.647

EDIT

I worked a little more on your animation.
Yes, the intervals were a problem.

So I complicated the code a little... To make it more simple!!! (lol)

I have set an interval which sets 6 timeouts.
The setTimeouts only add the animation class, which I call .animateD... And adjust the z-indexes.

And I no longer use the animation-play-state.

So on mouseleave, you can clear all timeouts and the interval in order to "reset" the animation to initial state. Then on mouseenter, restart the interval.

Here is a new CodePen.

Most changes are in CSS and JS:

CSS:

.bubbles{
  position: absolute;
  z-index:0;
  transform:translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
}

.bubbles li{
  position: absolute;
  list-style: none;
  display: block;
  border-radius: 100%;
  transform:scale(20);
  z-index:98;
}


/* Circle animation ----------------------------- */
.bubbles li:nth-child(1) {
  width: 1100px;
  height: 1100px;
  position: relative;
  bottom:500px;
  left: 400px;
  background-image: -webkit-linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
  background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
}

.bubbles li:nth-child(2) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 400px;
  bottom:200px; 
  background-image: -webkit-linear-gradient(to top, #feada6 0%, #f5efef 100%);
  background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
}

.bubbles li:nth-child(3) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 600px;
  bottom:320px; 
  background-image: -webkit-linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.bubbles li:nth-child(4) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 100px;
  bottom:180px; 
  background-color: #fd3061;
}

.bubbles li:nth-child(5) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 500px;
  bottom:200px; 
  background-image: -webkit-linear-gradient(to top, #cc208e 0%, #6713d2 100%);
  background-image: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
}

.bubbles li:nth-child(6) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 700px;
  bottom:150px; 
  background-image: -webkit-linear-gradient(to top, #b224ef 0%, #7579ff 100%);
  background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
}

.animateD{
  animation-name: CircleCSSAnimation;
  animation-duration: 5.2s;
  animation-iteration-count: infinite;
}

/* Mozilla Circle Animation */
@keyframes CircleCSSAnimation {
  0% { transform: scale(0); }
  6% { transform: scale(0); }
  99%{ transform: scale(4); }
  100%{ transform: scale(4); }
}
@-moz-keyframes CircleCSSAnimation {
  0% { -moz-transform: scale(0); }
  6% { -moz-transform: scale(0); }
  99%{ -moz-transform: scale(4); }
  100%{ -moz-transform: scale(4); }
}
/* Webkit First Circle Animation */
@-webkit-keyframes CircleCSSAnimation {
  0% { -webkit-transform: scale(0); }
  6% { -webkit-transform: scale(0); }
  99%{ -webkit-transform: scale(4); }
  100%{ -webkit-transform: scale(4); }
}
@-ms-keyframes CircleCSSAnimation {
  0% { -ms-transform: scale(0); }
  6% { -ms-transform: scale(0); }
  99%{ -ms-transform: scale(4); }
  100%{ -ms-transform: scale(4); }
}

@-o-keyframes CircleCSSAnimation {
  0% { -o-transform: scale(0); }
  6% { -o-transform: scale(0); }
  99%{ -o-transform: scale(10); }
  100%{ -o-transform: scale(10); }
}

JS:

var timeout2;
var timeout3;
var timeout4;
var timeout5;
var timeout6;

var intervalsSetting = function(num){
  console.log("SETTING");

  $(".bubbles li").css({"z-index":0});
  $(".bubbles li").eq(5).removeClass("animateD").css({"z-index":99});
  $(".bubbles li").eq(0).addClass("animateD").css({"z-index":100});
  console.log("1");
  timeout2 = setTimeout(function(){
    $(".bubbles li").css({"z-index":0});
    $(".bubbles li").eq(0).removeClass("animateD").css({"z-index":99});
    $(".bubbles li").eq(1).addClass("animateD").css({"z-index":100});
    console.log("2");
  },5000);
  timeout3 = setTimeout(function(){
    $(".bubbles li").css({"z-index":0});
    $(".bubbles li").eq(1).removeClass("animateD").css({"z-index":99});
    $(".bubbles li").eq(2).addClass("animateD").css({"z-index":100});
    console.log("3");
  },10000);
  timeout4 = setTimeout(function(){
    $(".bubbles li").css({"z-index":0});
    $(".bubbles li").eq(2).removeClass("animateD").css({"z-index":99});
    $(".bubbles li").eq(3).addClass("animateD").css({"z-index":100});
    console.log("4");
  },15000);
  timeout5 = setTimeout(function(){
    $(".bubbles li").css({"z-index":0});
    $(".bubbles li").eq(3).removeClass("animateD").css({"z-index":99});
    $(".bubbles li").eq(4).addClass("animateD").css({"z-index":100});
    console.log("5");
  },20000);
  timeout6 = setTimeout(function(){
    $(".bubbles li").css({"z-index":0});
    $(".bubbles li").eq(4).removeClass("animateD").css({"z-index":99});
    $(".bubbles li").eq(5).addClass("animateD").css({"z-index":100});
    console.log("6");
  },25000);
};

intervalsSetting();
var myInterval = setInterval(function(){
  intervalsSetting();
},30000);

var mouseISin=true;
$("body").on("mouseleave",function(){
  console.log("MOUSE IS OUT");
  mouseISin=false;

  $(".bubbles li").removeClass("animateD");
  clearTimeout(timeout2);
  clearTimeout(timeout3);
  clearTimeout(timeout4);
  clearTimeout(timeout5);
  clearTimeout(timeout6);
  clearInterval(myInterval);
  $(".bubbles li").css({"z-index":0});
});


$("body").on("mouseenter",function(){
  if(!mouseISin){
    console.log("MOUSE IS IN");
    mouseISin=true;

    clearInterval(myInterval);
    intervalsSetting();
    myInterval = setInterval(function(){
      intervalsSetting();
    },30000);
  }
});

First answer

When user opens or clicks on another tab...
The mouse left the body.

I think it could be the rigth moment to pause the animation.
And resume it when the mouse comes back over the body.

CodePen

$("body").on("mouseleave",function(){
  console.log("MOUSE IS OUT");
  $(".bubbles li").css({"animation-play-state":"paused"})
});


$(window).on("mouseenter",function(){
  console.log("MOUSE IS IN");
    $(".bubbles li").css({"animation-play-state":"running"})
});

Thank you for replying but the problem is I have everything set on an interval so when one is paused, the others aren't. If you want I can take to where that everything is paused like every circle and when I return, it plays. — Jagr, Apr 17 '17 at 06:02
I've had the animation paused for something like 10 minutes... And when mouse entered, it resumed correctly. The only thing I noticed, is that the animation doesn't always pause... As the mouseleave event sometimes does not fire. — Louys Patrice Bessette, Apr 17 '17 at 06:20
I Improved my answer... I think it should work better this way. ;) — Louys Patrice Bessette, Apr 17 '17 at 17:26
oh I see, you did it on hover? its great but the problem is what if they are on a mobile device? I only want the circles to stop when you open a new tab. Is that possible? — Jagr, Apr 18 '17 at 00:40
how about putting "mouse leave" for the body instead of container? that will work. Because when they open a new tab, they technically leave the body — Jagr, Apr 18 '17 at 00:47
mmm... mobile. Let me think. You have a point here. Could you try "mouseenter touchstart" and "mouseleave touchend" ?.. Not sure this works... But... I have to sleep too. I'll be back in a couple hours. — Louys Patrice Bessette, Apr 18 '17 at 05:03
Thanks for your code to stop animation when your not on the page. It helped a lot. — Jagr, Apr 21 '17 at 02:08

score 1 · Accepted Answer · edited Apr 21 '17 at 02:11

Well after long months of figuring it out I finally fixed it.
The problem was the Query setInterval function.

So I just removed it and made a "animation-delay", and other functions, in my css for all the circles.
And now it works perfectly.

I believe the setInterval was making it restart when you leave the tab so the css fixed it.
I will add the code for others who might come across this problem.

CSS

.bubbles{
  position: absolute;
  z-index:0;
  transform:translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.bubbles li{
  list-style: none;
  border-radius: 50%;
  animation: fadeAndScale 26s ease-in infinite;
  -ms-animation: fadeAndScale 26s ease-in infinite;
  -webkit-animation: fadeAndScale 26s ease-in infinite;
  -moz-animation: fadeAndScale 26s ease-in infinite;
  -o-animation: fadeAndScale 26s ease-in infinite;
  transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
  width: 1100px;
  height: 1100px;
  position: relative;
  bottom:500px;
  left: 0%;
  background: -webkit-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  background: -ms-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  background: -o-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  background: -moz-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  background: linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
  animation-name: firstCircle;

}
/* Mozilla First Circle Animation */
@keyframes firstCircle {
  0% {
    z-index: 100;
    transform: scale(0);

  }

  100%{
    z-index: 0;
    transform: scale(50);

  }
}
@-moz-keyframes firstCircle {
  0% {
    z-index: 100;
    -moz-transform: scale(0);

  }

  100%{
    z-index: 0;
    -moz-transform: scale(50);

  }
}
/* Webkit First Circle Animation */
@-webkit-keyframes firstCircle {
  0% {
    z-index: 100;
    -webkit-transform: scale(0);

  }

  100%{
    z-index: 0;
    -webkit-transform: scale(50);


  }
}
@-ms-keyframes firstCircle {
  0% {
    z-index: 100;
    -ms-transform: scale(0);

  }

  100%{
    z-index: 0;
    -ms-transform: scale(50);


  }
}

@-o-keyframes firstCircle {
  0% {
    z-index: 100;
    -o-transform: scale(0);

  }

  100%{
    z-index: 0;
    -o-transform: scale(50);


  }
}
/* End first circle animation -------------------------------------------------------------------------------------- */

/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 20%;
  bottom:50%; 
  animation-name: secondAnimation;
  visibility: hidden;
  animation-delay: 3.4s;

}
/* Webkit Second Animation */
@-webkit-keyframes secondAnimation {
  0% {
    visibility: visible;
    background: linear-gradient(45deg, #F14545 0%, #E7219B 100%);
    z-index: 100;
    -webkit-transform: scale(0);

  }

  100%{
    z-index: 0;
    -webkit-transform: scale(50);


  }
}

/* Mozilla Second Animation */
@-moz-keyframes secondAnimation {
  0% {
    z-index: 100;
    -moz-transform: scale(0);

  }

  100%{
    z-index: 0;
    -moz-transform: scale(50);


  }
}
/* Ms Second Animation */
@-ms-keyframes secondAnimation {
  0% {
    z-index: 100;
    -ms-transform: scale(0);

  }

  100%{
    z-index: 0;
    -ms-transform: scale(50);


  }
}

@-o-keyframes secondAnimation {
  0% {
    z-index: 100;
    -o-transform: scale(0);

  }

  100%{
    z-index: 0;
    -o-transform: scale(50);


  }
}
/* End of Second Circle ------------------------------------------------------------------------------------- */

/*Begin of Third Circle ----------------------------------------------------------------------------------- */

.bubbles li:nth-child(3) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left:70%;
  bottom:35%;
  visibility: hidden;
  animation-delay: 7.4s;
  animation-name: thirdAnimation;

}
/* Webkit Third Animation */
@-webkit-keyframes thirdAnimation {
  0% {
    visibility: visible;
    background: linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
    z-index: 100;
    -webkit-transform: scale(0);

  }

  100%{
    z-index: 0;
    -webkit-transform: scale(50);


  }
}
/* Mozilla Third Animation */
@-moz-keyframes thirdAnimation {
  0% {
    z-index: 100;
    -moz-transform: scale(0);

  }

  100%{
    z-index: 0;
    -moz-transform: scale(50);


  }
}
/* MS Third Animation */
@-ms-keyframes thirdAnimation {
  0% {
    z-index: 100;
    -ms-transform: scale(0);

  }

  100%{
    z-index: 0;
    -ms-transform: scale(50);


  }
}

@-o-keyframes thirdAnimation {
  0% {
    z-index: 100;
    -o-transform: scale(0);

  }

  100%{
    z-index: 0;
    -o-transform: scale(50);


  }
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */

/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */

.bubbles li:nth-child(4) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 20%;
  bottom:60%; 
  visibility: hidden;
  animation-delay: 11.6s;
  animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
@-webkit-keyframes fourthAnimation {
  0% {
    visibility: visible;
    background: linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
    z-index: 100;
    -webkit-transform: scale(0);

  }

  100%{
    z-index: 0;
    -webkit-transform: scale(50);

  }
}
/* Mozilla Fourth Animation */
@-moz-keyframes fourthAnimation {
  0% {
    z-index: 100;
    -moz-transform: scale(0);

  }

  100%{
    z-index: 0;
    -moz-transform: scale(50);

  }
}
/* MS Fourth Animation */
@-ms-keyframes fourthAnimation {
  0% {
    z-index: 100;
    -ms-transform: scale(0);

  }

  100%{
    z-index: 0;
    -ms-transform: scale(50);

  }
}

@-o-keyframes fourthAnimation {
  0% {
    z-index: 100;
    -o-transform: scale(0);

  }

  100%{
    z-index: 0;
    -o-transform: scale(50);

  }
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */

/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 60%;
  bottom:70%;
  visibility: hidden;
  animation-delay: 14s;
  animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
@-webkit-keyframes fifthAnimation {
  0% {
    visibility: visible;
    background: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
    z-index: 100;
    -webkit-transform: scale(0);

  }

  100%{
    z-index: 0;
    -webkit-transform: scale(50);


  }
}
@-moz-keyframes fifthAnimation {
  0% {
    z-index: 100;
    -moz-transform: scale(0);

  }

  100%{
    z-index: 0;
    -moz-transform: scale(50);


  }
}
@-ms-keyframes fifthAnimation {
  0% {
    z-index: 100;
    -ms-transform: scale(0);

  }

  100%{
    z-index: 0;
    -ms-transform: scale(50);


  }
}

@-o-keyframes fifthAnimation {
  0% {
    z-index: 100;
    -o-transform: scale(0);

  }

  100%{
    z-index: 0;
    -o-transform: scale(50);


  }
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */

/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */

.bubbles li:nth-child(6) {
  width: 1100px;
  height: 1100px;
  position: absolute;
  left: 70%;
  bottom:25%; 
  visibility: hidden;
  animation-delay: 15s;
  animation-name: sixthAnimation;
}
/* Webkit sixth animation */

@-webkit-keyframes sixthAnimation {
  0% {
    visibility: visible;
    background-color: linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
    z-index: 100;
    -webkit-transform: scale(0);
  }
  100%{
    z-index: 0;
    -webkit-transform: scale(50); 
  }
}
/* Mozilla Sixth Animation */
@-moz-keyframes sixthAnimation {
  0% {
    z-index: 100;
    -moz-transform: scale(0);
  }
  100%{
    z-index: 0;
    -moz-transform: scale(50); 
  }
}
/* MS Sixth Animation */
@-ms-keyframes sixthAnimation {
  0% {
    z-index: 100;
    -ms-transform: scale(0);
  } 
  100%{
    z-index: 0;
    -ms-transform: scale(50); 
  }
}

@-o-keyframes sixthAnimation {
  0% {
    z-index: 100;
    -o-transform: scale(0);
  } 
  100%{
    z-index: 0;
    -o-transform: scale(50); 
  }
}
/* End of Sixth Animation ---------------------------------------------------------------------------------------------- */

How to restart css animation when user opens a new tab or is inactive in the website

3 Answers3