javascript - 如何在用户打开新选项卡或网站处于非事件状态时重新启动 css 动画

标签 javascript jquery html 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); 
                }
            }

最佳答案

您可以向 window.focus 和 blur 事件添加处理程序

示例(恢复焦点动画)

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

click here for demo

编辑

要重新启动动画，请参阅演示:click here

下面的代码

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


})

关于javascript - 如何在用户打开新选项卡或网站处于非事件状态时重新启动 css 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43445077/

上一篇：html - 如何阻止 css 覆盖文本

下一篇：css - Bootstrap 4 : Stop collapse from pushing content down

相关文章：

javascript - 如何在日期选择器中添加自定义模板。？

javascript - window.onload 在字体加载之前触发

javascript - 如果向下滚动超过它，让 div 紧贴屏幕顶部

javascript - 带有cli的ember.js中的夹具数据在哪里

javascript - 具有缩放功能的 GMarker

javascript - Jquery 对话框标题栏

javascript - 将数字从 HTML 传递给 JS 函数，在 JS 中变为 "undefined"。为什么？

javascript - React 应用程序未按预期对更改使用react。为什么？

javascript - 在 float 条形图中同时显示悬停和旋转刻度 90 度

javascript - 安全错误 : Blocked a frame with origin from accessing a cross-origin frame

©2024 IT工具网  联系我们