波涛汹涌的生涩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的各种标签，但不成功。

最后，我只是

禁用的加载项

（因为加载项也减少了火狐的性能，尤其是加载项阻止加载项）。关闭所有我的附加组件后，它完美运行。