Since developing my site’s theme there has always been this annoying browser bug causing a ‘flicker’ whilst rolling over any element with a css3 transition. I’ve finally found a decent workaround which involves adding 1 line of css:
-webkit-transform: translateZ(0);This triggers the GPU to do the animation rather than the CPU and has fixed my flickering, as well as making the animation look smoother.
This line needs to go on the un-animated state, so in my case I applied it to the elements themselves rather than the :hover.
Kudos to Mauricio on Stack: http://stackoverflow.com/a/9727924