波濤洶涌的生澀CSS3動畫新的「頁面加載」

Question

我試圖表現出CSS3動畫作爲一個裝載機動畫，當我瀏覽到我的子頁面之一。 我在rotateY上使用關鍵幀動畫。 問題在於，在導航到另一個頁面的同時，動畫確實起作用，但是它非常乾燥且不連貫。在Chrome和Safari

雖然，同樣的動畫作品順利和完美。

這裏是一個小提琴： http://jsfiddle.net/p6mgxpbo/

HTML：

<div class="gb-loading"> 
    <div id="animatedElem" class="pin-c"> 
     <div class='pin'></div>  
    </div> 
    <div class="pin-mirror"></div> 
    <div id="gb-lb" class="load-bounce"></div> 
</div> 

CSS：

.gb-loading { 
     position: fixed; 
     left: 0; 
     right: 0; 
     top: 50%; 
     bottom: 0; 
     width: 70px; 
     height: 70px; 
     margin: auto; 
     z-index: 101; 
     margin-top: -100px; 
    } 
    .pin-c { 
     width: 70px; 
     height: 70px; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 11; 

     -webkit-animation: pulsate 1.5s linear infinite; 
      -moz-animation: pulsate 1.5s linear infinite; 
      -o-animation: pulsate 1.5s linear infinite; 
       animation: pulsate 1.5s linear infinite; 
    } 
    .pin { 
     width: 70px; 
     height: 70px; 
     background-color: #34baab; 
     position: absolute; 
     left: 0; 
     top: 0; 

     -webkit-border-radius: 50% 50% 50% 0; 
       border-radius: 50% 50% 50% 0; 

     -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -o-transform: rotate(-45deg); 
       transform: rotate(-45deg); 
    } 

    .pin-mirror { 
     width: 70px; 
     height: 70px; 
     background-color: #003146; 
     position: absolute; 
     left: 0; 
     bottom: -48px; 
     z-index: -1; 

     -webkit-border-radius: 50% 0 50% 50%; 
       border-radius: 50% 0 50% 50%; 

     -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -o-transform: rotate(-45deg); 
       transform: rotate(-45deg); 
    } 

    .pin:after { 
     content: ''; 
     width: 25px; 
     height: 25px; 
     margin: 22px 0 0 22px; 
     background-color: #003146; 
     position: absolute; 

     -webkit-border-radius: 50%; 
       border-radius: 50%; 
    } 

    .load-bounce { 
     width: 25px; 
     height: 25px; 
     position: absolute; 

     left: 65px; 
     background-color: #003146; 
     -webkit-transform: translateZ(0.5); 
      -moz-transform: translateZ(0.5); 
       transform: translateZ(0.5); 

     -webkit-border-radius: 50%; 
       border-radius: 50%; 

     -webkit-animation: bounce .5s linear infinite alternate; 
      -moz-animation: bounce .5s linear infinite alternate; 
      -o-animation: bounce .5s linear infinite alternate; 
       animation: bounce .5s linear infinite alternate; 
    } 

    @-webkit-keyframes pulsate { 
     0% { 

      -webkit-transform: rotateY(0deg); 
     }   
     100% { 

      -webkit-transform: rotateY(360deg); 
     } 
    } 

    @-moz-keyframes pulsate { 
     0% { 

      -moz-transform: rotateY(0deg); 
     } 
     100% { 

      -moz-transform: rotateY(360deg); 
     } 
    } 

    @keyframes pulsate { 
     0% { 

      transform: rotateY(0deg); 
     } 
     100% { 

      transform: rotateY(360deg); 
     } 
    } 

    @-webkit-keyframes bounce { 
     0% { 
      -webkit-transform: translateY(-10px); 

     } 
     100% { 
      -webkit-transform: translateY(-40px); 
     } 
    } 
    @keyframes bounce { 
     0% { 
      transform: translateY(-10px); 

     } 
     100% { 
      transform: translateY(-40px); 
     } 
    } 

    @-moz-keyframes bounce { 
     0% { 
      -moz-transform: translateY(-10px); 

     } 
     100% { 
      -moz-transform: translateY(-40px); 
     } 
    } 

挺舉只來當它有一個頁面是加載上其他資源。我正在嘗試將此元素用作預加載動畫。所以它在頁面上，直到頁面的其餘部分被加載。我也有谷歌地圖在同一頁面上。所以，當瀏覽器正在下載其他資源時，直到那個時候動畫混亂。你將無法看到小提琴上的混蛋。

需要就如何解決這個問題的一些見解。 在此先感謝！

P.S：我也經歷了很多與此相關的StackOverflow上的答案，並試圖在谷歌搜索，但都無濟於事。

Answer 1

不幸的是，這是你會而不是能夠修復，修改或控制瀏覽器。你將不得不使用某種形式的黑客來讓它工作，或者混淆系統做你想做的事情，但是從一個普通的渲染來看，它是行不通的。

---

你可能做的是給動畫添加一個延遲。

-webkit-animation: pulsate 0.8s linear 10ms infinite; 
-moz-animation: pulsate 0.8s linear 10ms infinite; 
-o-animation: pulsate 0.8s linear 10ms infinite; 
animation: pulsate 0.8s linear 10ms infinite; 

JSFiddle Example

這將完成是讓頁面呈現，油漆和顯示器，然後它會啓動動畫前等待100毫秒（0.1秒）。

如果這不起作用，那麼它的下到FF不渲染動畫乾淨利落Chrome或其他一些瀏覽器，這是一個簡單的瀏覽器的問題，將是極其困難的避開。

---

每一個瀏覽器有着完全不同的樹，渲染和顯示HTML CSS &到您的顯示器烤漆工藝。壁虎（FF）和WebKit（Chrome瀏覽器）都使用完全不同的方法和過程來顯示頁面，可悲的是，當談到做動畫，蛤蚧具有滯後的最小的量啓動這就是爲什麼你看到小位動畫時動畫開始時的滯後/急動。

的Webkit流

壁虎流

正如可以從上面的流程看到，兩個流是完全不同的，而且DOM被裝入，呈現方式，畫和然後顯示是完全不同的。

希望此幫助清除問題。

我已經添加了一條最好的信息供您閱讀關於瀏覽器渲染的信息。瞭解瀏覽器在前端工作時的工作原理總是很好的。

• How modern browsers work

Answer 2

我使用關鍵幀用的box-shadow創建一個動畫。然後，我使用動畫命令來選擇關鍵幀名稱，並在動畫上定義一些詳細信息（持續時間，延遲等）。

#myanimation{ 
    animation: x 1s 1 ease-out ; 
    -webkit-animation: x 1s 1 ; 
    -webkit-backface-visibility: hidden; 
    -moz-animation: x 1s 1; 
    -o-animation: x 1s 1 ; 
} 

我不會發布我的關鍵幀，因爲它的長。但是，即使我的動畫持續時間僅爲1秒，我仍然經歷着時滯。 我嘗試了一切來修復滯後，我添加了線性，緩和等等。動畫commnad的各種標籤，但不成功。

最後，我只是

禁用的加載項

（因爲加載項也減少了火狐的性能，尤其是加載項阻止加載項）。關閉所有我的附加組件後，它完美運行。