Finally fixed the flicker

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:

CSS3 scale and rotate animation (webkit only)

Have you tried hovering over my logo (up top) in webkit? The animation is a nice effect and is really easy to implement as a progressive enhancement.

#logo a:hover {
    -webkit-animation-name: rotateThis;
    -webkit-animation-iteration-count: 1;
@-webkit-keyframes rotateThis {
    0% { -webkit-transform:scale(1) rotate(0deg); }
    10% { -webkit-transform:scale(1.1) rotate(0deg); }
    100% {-webkit-transform:scale(1.1) rotate(360deg); }

The important part is the ‘keyframes’ chunk – this tells the browser what to animate, and at what point. In my example we start off (0%) with a non-scaled, non-rotated element. We then (at 10%) make it larger, and finally we make it finish (100%) fully enlarged and rotated 360 degrees.