Question

这是一个简单的过渡动画，你可以在这里试试：http://jsfiddle.net/fFje2/1/

HTML

<body>
<div class="container">
    <div class="rect"></div>
    <div class="circ"></div>
</div>
</body>

CSS

/*normal*/
@-webkit-keyframes ANIM{
    0%{-webkit-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-webkit-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-webkit-transform: rotate(360deg) translateX(50px) rotate(90deg)} 
}
@-moz-keyframes ANIM{
    0%{-moz-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-moz-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-moz-transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
@-o-keyframes ANIM{
    0%{-o-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-o-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-o-transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
@-ms-keyframes ANIM{
    0%{-ms-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-ms-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-ms-transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
@keyframes ANIM{
    0%{transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
/*invert*/
@-webkit-keyframes ANIM2{
    0%{-webkit-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-webkit-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-webkit-transform: rotate(0deg) translateX(60px) rotate(90deg)} 
}
@-moz-keyframes ANIM2{
    0%{-moz-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-moz-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-moz-transform: rotate(0deg) translateX(60px) rotate(90deg)}
}
@-o-keyframes ANIM2{
    0%{-o-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-o-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-o-transform: rotate(0deg) translateX(60px) rotate(90deg)}
}
@-ms-keyframes ANIM2{
    0%{-ms-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-ms-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-ms-transform: rotate(0deg) translateX(60px) rotate(90deg)}
}
@keyframes ANIM2{
    0%{transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{transform: rotate(0deg) translateX(60px) rotate(90deg)}
}

.container{
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    background: #f00;
}
.rect{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 20px;
    height: 20px;
    background: #0f0;

    -webkit-animation: ANIM 5s linear infinite;
    -moz-animation: ANIM 5s linear infinite;
    -o-animation: ANIM 5s linear infinite;
    -ms-animation: ANIM 5s linear infinite;
    animation: ANIM 5s linear infinite;
}
.circ{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 20px;
    height: 20px;
    background: #00f;
    border-radius: 50%;

    -webkit-animation: ANIM2 10s linear infinite;
    -moz-animation: ANIM2 10s linear infinite;
    -o-animation: ANIM2 10s linear infinite;
    -ms-animation: ANIM2 10s linear infinite;
    animation: ANIM2 10s linear infinite;
}

大多数浏览器使用硬件加速来处理图形，但是，Mozilla Firefox 30.0将此页面上的CPU使用率提高到约40％-50％。

我们已经在Opera，Safari，Chrome甚至是IE上尝试过它，除了FF之外，它在所有这些中都可以正常工作，其中过程负载非常高。多台计算机，多台浏览器都是一样的：只有FF正在放慢速度。

是否有任何解决方法可以使其更加优化？甚至尝试使用 translateZ（0）和 rotate3d（0,0,1，...）但似乎没有任何事情发生。

感谢任何帮助。

Answer 1

你可以感谢Mozilla。在@keyframes将在所有主流浏览器中使用一种标准语法之前，会出现此问题。 AFAIK没有解决方法（至少降低CPU使用率）。

在Mozilla Firefox 30.0上使用CSS3关键帧过渡动画高CPU使用率

1 个答案: