CSS Animation Sluggish and Slow - CPU Performance?

Question

I am using css animation but it seems to be a bit sluggish on some pages, I believe due to the CPU usage.

.test {
left:50%;
position:relative;
overflow:hidden;
animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s;
-webkit-animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s;
-moz-animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s;
animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
z-index:5;
}

@keyframes waitandhide2 {
    from { left:50%; opacity:1; }
    to { left:-105%; opacity:1; }
}
@keyframes show2 {
    from { left:105%; opacity:1; }
    to { left:50%; opacity:1; }
}
@-webkit-keyframes waitandhide2 {
    from { left:50%; opacity:1; }
    to { left:-105%; opacity:1; }
}
@-webkit-keyframes show2 {
    from { left:105%; opacity:1; }
    to { left:50%; opacity:1; }
}
@-moz-keyframes waitandhide2 {
    from { left:50%; opacity:1; }
    to { left:-105%; opacity:1; }
}
@-moz-keyframes show2 {
    from { left:105%; opacity:1; }
    to { left:50%; opacity:1; }
}

I have read somewhere that you can fix this by using -webkit-transform: translate3d(0, 0%, 0); I have no idea how to do this in this scenario.

Any help is appreciated.

CSS3 animations are hardware accelerated, the're supposed to use the GPU, not the CPU that much. Maybe if you can provide a fiddle, other users can test and tell you if the animation if fluid on their machines or not. — Jeremy Thille
– Jeremy Thille, Commented Feb 17, 2015 at 21:13
It seems to be more of an issue when it is trying to run on page load. Repeating the animation runs smoothly, when there is nothing else loading, I have delayed the css animation on initial load and it seems to be okay now. — WebbySmart
– WebbySmart, Commented Feb 17, 2015 at 21:36

Mircea · Accepted Answer · 2015-02-17 22:05:58Z

1

Instead of animating left:% propriety, animate translate: transform(%). Adding -webkit-transform: translate3d(0, 0%, 0) and the animated element will create a separate layer and may help with performance. This is however a hack, you should use will-change propriety for this.

answered Feb 17, 2015 at 22:05

Mircea

11.7k26 gold badges67 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WebbySmart · Accepted Answer · 2015-02-17 21:50:31Z

1

I have corrected this issue by delaying the animation onload.

It seems to be more of an issue when it is trying to run on page load, while the page is downloading many other elements, and images.

It more noticeable on larger pages, which made sense. Thanks.

answered Feb 17, 2015 at 21:50

WebbySmart

7266 silver badges16 bronze badges

Collectives™ on Stack Overflow

CSS Animation Sluggish and Slow - CPU Performance?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related