如何當用戶打開一個新標籤頁或在網站

我有是在間隔設置爲顯示自己，當達到一定的時間已經過去了瓶坯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

如何當用戶打開一個新標籤頁或在網站

回答

相關問題