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.
box-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.
- 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 (