I am trying some CSS3 keyframe animations in a web app I'm developing. I have tried both my own custom animations and some provided by animate.css. The result is the same: the animation works fine, but after a while, even if I leave the browser alone, the CPU usage goes up to around 100% and stays there. Killing that process kills the web app, removing the CSS animations gets rid of the problem, so there is no doubt what's causing it. I am mainly using Chrome, and that's where I have seen the problem so far.
Target platforms for the web app includes iOS and Android via Phonegap, Windows and OSX via node-webkit. The problems I describe do not seem to occur in mobile Safari, but what about other platforms? Is this a general problem with keyframe animations? Are there any tricks to avoid this?
EDIT: Added demo link, but unable to replicate the problem. In the full app I am using a number of libraries and frameworks, like AngularJS, Angular-UI, Angular-UI-router, Fastclick, Animate.css, etc. I guess they might interfere somehow? Hard to say, but removing my animations from the app also removed the delayed 100% CPU usage.
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; } 
