100% CPU usage long after CSS3 keyframe animation has finished - how can it be avoided?

Question

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;
}

score 3 · Accepted Answer · answered Nov 11 '13 at 22:44

The cause of the 100% CPU usage is due to the -webkit-animation-fill-mode: forwards declaration, if my suspicion that you're doing your primary testing on Chrome is correct.

It looks like it's a current bug with Chrome (tested on version 30.0.1599.101), according to an article by Wercker and my own research:

For this animation we use animation keyframes and the -webkit-animation-fill-mode: forwards; so that the sidebar retains its position from the last frame of the animation. An animation normally would snap back to its original setting after it is finished playing.

This is great for us, but not for Chrome. The CSS animations using -webkit-animation-fill-mode: forwards; are causing the 100% CPU load bug. It actually only occurs when the CSS animation ends and the tab is inactive.

This seems to be corroborated by this issue on the Chromium project page.

As Lindsey Bateman says in the article, the bug is fixed in Chrome Beta and Chrome Canary (33.0.1706.0 canary), so we shouldn't be waiting for very long to get this into current Chrome.

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

If you're using 3d (eg even if not, some recommend tricking CSS into 3d to let the GPU help render), try this trick 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;

edited May 23 '17 at 12:23

Community

1
1

answered Oct 25 '13 at 09:44

tomByrer

1,105
12
21

I have seen this before, and I thought this was supposed to help *during* the animation. My CPU load problems occur long after the animation is finished. Would it really help for that? I'll give it a try, though. – Per Quested Aronsson Oct 25 '13 at 12:43
I tried it, and it didn't help, unfortunately. Please see my EDIT above. – Per Quested Aronsson Oct 25 '13 at 20:56
I've had odd high CPU usage before in another sphere (programming DSP in SSE). I found the only way to isolate odd bugs are: 1. Save often as different file names so I can roll back to when things were normal (GIT works better, but my platform wasn't in text) 2. Turn off items until you see the CPU spike disappear; process of elimination. Seems you're 1/2 there. – tomByrer Nov 05 '13 at 18:34
Could be a bug also, maybe in your code, or browser? I've had [denormals](http://en.wikipedia.org/wiki/Denormal_number) eat up CPU when I was trying to do maths with tiny fractions. – tomByrer Nov 05 '13 at 19:41

score 1 · Answer 3 · answered Dec 06 '13 at 20:38

I got rid of the problem by disabling all extensions. It remains to be investigated which one was responsible. These are the suspects:

AngularJS Batarang 0.4.3
avast! Online Security 8.0.1500
ColorZilla 0.5.4
HootSuite Hootlet 4.0.10
iGetter 2.9.2
Intel® XDK 2.6.1
Ripple Emulator (Beta) 0.9.15
Xmarks Bookmark Sync

100% CPU usage long after CSS3 keyframe animation has finished - how can it be avoided?

3 Answers3