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.

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

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

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).