我正在开发的网络应用程序中尝试一些 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;
}