CSS3 keyframe transition animation high CPU usage on Mozilla Firefox 30.0

Question

Here is a simple transition animation, you can try it out here: http://jsfiddle.net/fFje2/1/

HTML

<body>
<div class="container">
    <div class="rect"></div>
    <div class="circ"></div>
</div>
</body>

CSS

/*normal*/
@-webkit-keyframes ANIM{
    0%{-webkit-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-webkit-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-webkit-transform: rotate(360deg) translateX(50px) rotate(90deg)} 
}
@-moz-keyframes ANIM{
    0%{-moz-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-moz-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-moz-transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
@-o-keyframes ANIM{
    0%{-o-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-o-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-o-transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
@-ms-keyframes ANIM{
    0%{-ms-transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{-ms-transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{-ms-transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
@keyframes ANIM{
    0%{transform: rotate(360deg) translateX(50px) rotate(90deg)}
    50%{transform: rotate(0deg) translateX(50px) rotate(90deg)}
    100%{transform: rotate(360deg) translateX(50px) rotate(90deg)}
}
/*invert*/
@-webkit-keyframes ANIM2{
    0%{-webkit-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-webkit-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-webkit-transform: rotate(0deg) translateX(60px) rotate(90deg)} 
}
@-moz-keyframes ANIM2{
    0%{-moz-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-moz-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-moz-transform: rotate(0deg) translateX(60px) rotate(90deg)}
}
@-o-keyframes ANIM2{
    0%{-o-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-o-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-o-transform: rotate(0deg) translateX(60px) rotate(90deg)}
}
@-ms-keyframes ANIM2{
    0%{-ms-transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{-ms-transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{-ms-transform: rotate(0deg) translateX(60px) rotate(90deg)}
}
@keyframes ANIM2{
    0%{transform: rotate(0deg) translateX(60px) rotate(90deg)}
    50%{transform: rotate(360deg) translateX(60px) rotate(90deg)}
    100%{transform: rotate(0deg) translateX(60px) rotate(90deg)}
}

.container{
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    background: #f00;
}
.rect{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 20px;
    height: 20px;
    background: #0f0;

    -webkit-animation: ANIM 5s linear infinite;
    -moz-animation: ANIM 5s linear infinite;
    -o-animation: ANIM 5s linear infinite;
    -ms-animation: ANIM 5s linear infinite;
    animation: ANIM 5s linear infinite;
}
.circ{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 20px;
    height: 20px;
    background: #00f;
    border-radius: 50%;

    -webkit-animation: ANIM2 10s linear infinite;
    -moz-animation: ANIM2 10s linear infinite;
    -o-animation: ANIM2 10s linear infinite;
    -ms-animation: ANIM2 10s linear infinite;
    animation: ANIM2 10s linear infinite;
}

Most of the browsers use hardware acceleration to process the graphics, however, Mozilla Firefox 30.0 turns up CPU usage on this page to ~40%-50%.

We've tried it in Opera, Safari, Chrome and even on IE, it works fine in all of them, except FF, where the process load is very high. Multiple computers, multiple browsers, all the same: Only FF is slowing down.

Is there any workaround to make it more optimised? Even tried using translateZ(0), and rotate3d(0,0,1,...) but nothing seems to happen.

Any help is appreciated.

Look at http://stackoverflow.com/q/13176746/4306572 The same problem. — 3rdthemagical, Apr 07 '16 at 11:11

score 1 · Answer 1 · answered Jul 08 '14 at 08:52

1

You can thank Mozilla. Until @keyframes will come in one standard syntax in all major browsers this problem will occur. AFAIK there's no workaround (at least to lower CPU usage).

answered Jul 08 '14 at 08:52

Enethion

1,199
9
9

Thank you for your response. It would be great to lower the usage to half, but nothing seems to work... Maybe its a proper solution to disable these animations on FF 30.0 and below – Gardenee Jul 08 '14 at 11:18

CSS3 keyframe transition animation high CPU usage on Mozilla Firefox 30.0

1 Answers1