如何当用户打开一个新标签页或在网站

我有是在间隔设置为显示自己，当达到一定的时间已经过去了瓶坯CSS动画不活动重新启动CSS动画。当你在网站上时，它完美地工作，然而，当你离开网站并打开一个新标签并在几秒钟后回来时，动画似乎重新开始，所有的圈子都会立即开始。如何当用户打开一个新标签页或在网站

对于我的问题，我是问你怎么设置的圆圈当用户打开一个新标签重新开始回来。只需打开codepen我将在下面打开一个新选项卡，并在几秒钟后回来，您将看到所有的圆圈都开始在一起。我的代码将在下面发布。

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

来源

2017-04-17 Jagr

“不要”。没有理由在你的动画中没有看到它时浪费别人的CPU周期。相反，当文档模糊时让代码停止运行，然后在文档再次获得焦点时恢复运行。 –

我该如何做到当用户不在网站上时，为什么要暂停？ – Jagr

不幸的是，这不是一个可以直接解决的问题。你必须处理浏览器将你的setInterval率下降到几乎没有的事实...甚至更多的限制即将到来！ – Brad

想出来的，我终于固定它的长个月后嘛。
问题是查询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 ---------------------------------------------------------------------------------------------- */

来源

2017-04-21 02:07:14 Jagr

您可以将处理程序添加到window.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

编辑

要重新启动动画演示看到：下面

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


})

来源

2017-04-17 04:44:41 repzero

单击iframe外部，您将看到动画已暂停 – repzero

Wait“Click outside the iframe “？那是什么意思。我试过了，圈子仍然在同一时间开始。 – Jagr

我的歉意..click里面的iframe，然后外面..你应该看到动画暂停.. – repzero

编辑click here

代码

我对你的动画做了更多的工作。
是的，intervals是个问题。

所以我复杂的代码有点...为了使它更简单！（LOL）

我已设置interval这台6 timeouts。
setTimeouts只添加动画类，我称其为.animateD ...并调整z索引。

我不再使用animation-play-state。

因此在mouseleave上，您可以清除所有timeouts和interval以便将动画重置为初始状态。然后在mouseenter上重新启动interval。

这里是一个new 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。

我认为这可能是暂停动画的好时机。
并且当鼠标通过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"}) 
});

来源

2017-04-17 05:33:18

谢谢你的回复，但问题是我有一段时间的设置，所以当一个人暂停时，其他人不是。如果你愿意，我可以把它带到每个圈子都暂停的地方，当我回来的时候，它会播放。 – Jagr

我已将动画暂停了10分钟左右的动作......当鼠标进入时，它恢复正常。我唯一注意到的是，动画并不总是会暂停......因为mouseleave事件有时不会触发。 –

你认为它只是当我在Safari上使用它？ – Jagr

如何当用户打开一个新标签页或在网站

回答

相关问题