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?
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.
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.”
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.