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

Posted 2023-03-06

技术标签:

【中文标题】Mozilla Firefox 30.0 上的 CSS3 关键帧过渡动画 CPU 使用率高【英文标题】：CSS3 keyframe transition animation high CPU usage on Mozilla Firefox 30.0 【发布时间】：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,...) 但似乎没有任何反应。

感谢任何帮助。

【问题讨论】：

看***.com/q/13176746/4306572同样的问题。 【参考方案1】：

您应该感谢 Mozilla。直到@keyframes 在所有主流浏览器中都采用一种标准语法，这个问题才会发生。 AFAIK 没有解决方法（至少可以降低 CPU 使用率）。

【讨论】：

感谢您的回复。将使用率降低到一半会很好，但似乎没有任何效果......也许它是在 FF 30.0 及以下禁用这些动画的正确解决方案

以上是关于Mozilla Firefox 30.0 上的 CSS3 关键帧过渡动画 CPU 使用率高的主要内容，如果未能解决你的问题，请参考以下文章

Mozilla FireFox页面根据身份验证类型控制更改

使用 mozilla firefox 监听 UDP 端口的方法