How to restart css animation when user opens new tab or is inactive on website

Question

How to restart css animation when user opens new tab or is inactive on website

I have a css animation that is set on an interval to show itself and transform when a certain time has passed. It works great when you are on a website, however, when you leave the site and open a new tab and come back in a couple of seconds, the animation seems to reboot and all the circles start all at once.

In my question, I ask how to set up circles to restart when the user opens a new tab and returns. Just open the code that I’ll have below, open a new tab and come back in a couple of seconds, and you will see that the circles start all together. My code will be published 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); 
                }
            }

+4

javascript jquery html css

Jagr 17 . '17 4:19

3

window.focus blur

( )

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

, . :

$(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"
    })
  })


})

+3

repzero 17 . '17 4:44

.
, intervals.

, ... !!! ()

interval, 6 timeouts.
setTimeouts , .animateD... z-.

animation-play-state.

, mouseleave timeouts interval, "reset" . interval.

CodePen.

CSS 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);
  }
});

...
body.

I think this may be the decisive moment for pausing the animation.
And resume it when the mouse comes back through 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"})
});

+1

Louys Patrice Bessette Apr 17 '17 at 5:33

source share

Jagr · Accepted Answer · 2017-04-21T02:07:14+0000

, , , , , . Query setInterval.

, " " CSS .
.

, setInterval , , css .
, .

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 new tab or is inactive on website

More articles: