Jerky CSS3 Animations – How to Smooth Out?

[Lynda]

I have CSS3 animation on my site as an intro. On one computer (fast with a decent GPU) is smooth and what I am looking for. On another computer (much slower) it is very jerky and sometimes you miss the animation completely.

I have attempted to preload the entire page and then add classes that trigger the animation using JS to attempt to improved animation. It seemed to help some but did not solve the problem.

Is there a way to smooth out CSS3 animations to have consistency across computers of all types?

In lieu of posting all of the code here I [created a fiddle](http://jsfiddle.net/Lynda333/df8gw/4/ “jsFiddle of Code”).

[John]

One thing I really don’t care about when browsing is intro pages. But that’s just me.

[dfogge]

i don’t believe there are any ways to increase the smoothness of css animations other than simplifying your design, ie: keeping drop-shadows and box-shadows to a minimum, not loading large images, etc.

css is rendered faster than javascript, but it will vary from device to device based on processing power.

also, i’d definitely nix the splash page.

to quote jakob nielsen: “splash pages are useless and annoying. In general, every time you see a splash page, the reaction is “oh no, here comes a site that will be slow and difficult to use and that doesn’t respect my time.”

[Lynda]

Thanks for the advice and wisdom. I have considered an intro page and I have also considered no intro page and creating a short CSS animation to explain a product I am offering.

Regardless of an intro page or not I wish there was a way to create a more consistent experience as I have other applications that I would like to use CSS Animations.

[bcintegrity1]

Here’s a link to a slideshow I’ve worked on… and absolutely… the fewer the properties being animated, the smoother it runs. For example, just adding box-shadow properties to the animation caused some jitters.

Hope this gives you some ideas.

http://integritycontractingofva.com/Copied-Crawl-Space-Mold–and–Fungus-Richmond%2C-VA.php

[Author]

Posts