Laggy (or Jerky) CSS3 Animations - How to Smooth Out?

Question

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.

Answer 1

The "smoothness" depends on the rendering capabilities of the browser which in turn depend on the client machine's capabilities. The best you can do is to make sure that your web pages do not have unreasonably heavy images, or hard to render fonts, etc. that takes more computation from the browser perspective.

Your fiddle works perfectly fine for me.