Chrome screen flash when applying a CSS3 animation (only the first time)
Apparently, it's a known issue with webkit animations. A bit of googling came up with this...
body { -webkit-transform: translate3d(0, 0, 0);}I added that to the css in your example and tried it about 10 times and didn't get the flicker once, where I was able to consistently get it before.
I have seen this lots of times in older Chrome builds, but as of the last few weeks it has been fixed. I'm running Chrome 19, and don't see these flashes any more.
I think that it happens when a 3d transform is animated. By forcing a 3d translate as Archer has pointed out this is avoided, as the page is already rendered on the graphics card.