Fixing jerky CSS3 animations

When a CSS3 animation makes the animated element flicker, it may well be due to pixel fragments being handled differently during animation. You can force the browser into rendering the element on the GPU by adding certain properties. In Chrome, the combination of the following properties has the best effect.

Copybox-shadow: 0 0 0 #000
transform: translate3d(0,0,0) # remember to add vendor prefixes

Depending on your markup, you might need to set these properties on several elements (presumably all those that have height or width in %).

For background and further information, see the linked StackOverflow answer.

Caveats

• An accelerated container might reduce the quality of your image rendering
• Chrome has a blacklist of graphics cards for which it disables acceleration by default. You can override this in your Chrome settings (about:something).