CODEWITHSUNDEEP
css-transitions
Matthew O'Connell
Matthew O'Connell

Reputation: 37

Lagging and Flickering Animations using CSS animations

I am working on an interactive web UI and am running into flickering and lagging animations.

I am almost entirely using CSS transitions, adding and removing classes with jQuery to start/stop any particular animation. I've heard this is better for performance than using jQuery animations, but I am still running into flickering and lagging animations when using Chrome (the intended browser for the application).

Check it out here: lib.ncsu.edu/hunt_touchscreens/demo

Here is an example of one of the transitions I am doing. It's very straightforward and I am not using any webkit, o, etc. prefixes.

#x {
    opacity: 0;
    transition: opacity .5s;
}

I hope this question isn't too open-ended, but I am curious is this just a limitation of the browser having a lot of different concurrent transitions, or are there effective strategies to avoid these performance issues.

Thanks a lot for any advice.

Upvotes: 3

Views: 4089

Answers (1)

joeyfb
joeyfb

Reputation: 3249

It's could take a lot of work, but in your site you transition from left/right a lot, and that taxes the browser because it has to redo it's layout as it has to calculate not only that single element moving, but any other element around it.

The trick to having performant css animations is sticking to only a couple properties that browsers are very fast at, especially when you have a transition heavy page like yours where lots of elements can potentially move at once.

Read more about it here, but the gist of it is using the following properties for changing elements,

  • Position — transform: translateX(n) translateY(n) translateZ(n);
  • Scale — transform: scale(n);
  • Rotation — transform: rotate(ndeg);
  • Opacity — opacity: n;

So you'll need to rewrite all those "left" position changes as some form of transform: translateX(); and consider how that affects other elements within the pages if you want optimum performance.

Upvotes: 3

Related Questions