Question

我在我正在开发的网络应用程序中尝试一些CSS3关键帧动画。我已经尝试了自己的自定义动画和animate.css提供的一些动画。结果是一样的：动画工作正常，但过了一段时间，即使我单独离开浏览器，CPU使用率也会上升到100％左右并保持不变。杀死该进程会杀死Web应用程序，删除CSS动画可以解决问题，因此毫无疑问是什么导致了它。我主要使用的是Chrome，这就是我到目前为止看到问题的地方。

Web应用程序的目标平台包括iOS和Android，通过Phonegap，Windows和OSX通过node-webkit。我描述的问题在移动Safari中似乎没有出现，但其他平台呢？这是关键帧动画的一般问题吗？是否有任何技巧可以避免这种情况？

编辑：添加了demo link，但无法复制问题。在完整的应用程序中，我使用了许多库和框架，如AngularJS，Angular-UI，Angular-UI-router，Fastclick，Animate.css等。我猜他们可能会以某种方式干扰？很难说，但从应用程序中删除我的动画也消除了延迟100％的CPU使用率。

HTML：

<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>

使用Javascript：

document.getElementById('start').addEventListener('click', function(e) {
    document.getElementById('ball').classList.add('remove');
});

document.getElementById('reset').addEventListener('click', function(e) {
    document.getElementById('ball').classList.remove('remove');
});

CSS：

.ball {
    width:100px;
    height:100px;
    border-radius:100px;
    background-color:darkred;
    position:absolute;
    top:100px;
    left:200px;
}

@-webkit-keyframes slide {
    from { top:100px; left:200px; }
    to { top:100px; left:-100px; }
}

.remove {
    animation: slide 1s linear;
    -webkit-animation: slide 1s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

Answer 1

100％CPU使用率的原因是-webkit-animation-fill-mode: forwards声明，如果我怀疑您在Chrome上进行主要测试是正确的。

根据an article by Wercker和我自己的研究，看起来这是Chrome的当前错误（在30.0.1599.101版本上测试过）：

对于这个动画，我们使用动画关键帧和   -webkit-animation-fill-mode：转发;这样侧边栏就可以保留动画最后一帧的位置。通常是动画   完成播放后会弹回原来的设置。

这对我们很有用，但对Chrome不适用。使用CSS动画   -webkit-animation-fill-mode：转发;导致100％CPU负载错误。它实际上只发生在CSS动画结束和选项卡时   没有用。

这似乎在Chromium项目页面上this issue得到了证实。

正如Lindsey Bateman在文章中所说，该错误已在Chrome Beta和Chrome Canary（33.0.1706.0 canary）中修复，因此我们不应该等待很长时间才能将其转换为当前的Chrome。

Answer 2

如果你正在使用3d（例如，即使没有，有些人建议在3d中使用CSS来让GPU帮助渲染），试试这个技巧via mddw

translateZ(0) /* only needed if no CSS-3d commands are used to toggle GPU rendering */
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;

Answer 3

我通过禁用所有扩展程序解决了这个问题。仍有待调查哪一个负责。这些是嫌犯：

AngularJS Batarang 0.4.3
的avast！在线安全8.0.1500
ColorZilla 0.5.4
HootSuite Hootlet 4.0.10
iGetter 2.9.2
英特尔®XDK2.6.1
Ripple Emulator（Beta）0.9.15
Xmarks书签同步

CSS3关键帧动画完成后，100％CPU使用率很长 - 如何避免？

3 个答案: