【发布时间】：2014-08-28 21:47:24
【问题描述】：
这是一个简单的过渡动画，你可以在这里试试：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 的进程负载非常高。多台电脑，多台浏览器，都一样：只有FF变慢了。
是否有任何解决方法可以使其更加优化？甚至尝试使用 translateZ(0) 和 rotate3d(0,0,1,...) 但似乎没有任何反应。
感谢任何帮助。
【问题讨论】：
标签： css firefox css-transitions css-animations