1

我正在开发的网络应用程序中尝试一些 CSS3 关键帧动画。我尝试了自己的自定义动画和animate.css提供的一些动画。结果是一样的：动画效果很好，但过了一会儿，即使我不理会浏览器，CPU 使用率也会上升到 100% 左右并保持在那里。杀死该进程会杀死 Web 应用程序，删除 CSS 动画可以解决问题，因此毫无疑问是什么原因造成的。我主要使用 Chrome，这就是我到目前为止看到的问题。

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

编辑：添加了演示链接，但无法复制问题。在完整的应用程序中，我使用了许多库和框架，例如 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;
}
4

3 回答 3

3

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

根据 Wercker的一篇文章和我自己的研究，这看起来像是 Chrome 的当前错误（在版本 30.0.1599.101 上测试） ：

对于这个动画，我们使用动画关键帧和 -webkit-animation-fill-mode: forwards; 以便侧边栏保留动画最后一帧的位置。动画通常会在播放完毕后恢复到其原始设置。

这对我们来说很棒，但对 Chrome 来说却不是。CSS 动画使用 -webkit-animation-fill-mode: forwards; 导致 100% CPU 负载错误。它实际上仅在 CSS 动画结束且选项卡处于非活动状态时发生。

Chromium 项目页面上的这个问题似乎证实了这一点。

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

于 2013-11-11T22:44:08.767 回答
1

如果您使用的是 3d（例如，即使没有，也有人建议将 CSS 引入 3d 以让 GPU 帮助渲染），请通过 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;
于 2013-10-25T09:44:42.717 回答
1

我通过禁用所有扩展解决了这个问题。究竟是哪一方负责，还有待调查。这些是嫌疑人：

  • AngularJS Batarang 0.4.3
  • 阿瓦斯特！在线安全 8.0.1500
  • ColorZilla 0.5.4
  • HootSuite Hootlet 4.0.10
  • iGetter 2.9.2
  • 英特尔® XDK 2.6.1
  • 波纹模拟器（测试版）0.9.15
  • Xmarks 书签同步
于 2013-12-06T20:38:09.353 回答