CSS3 Ken Burn effect pause when the page is scrolling then play again for smooth animation

I have built a CSS3 Ken Burn effect with the aid of others in this community. It was jerky until we switched to a translating animation. Now it is very smooth.

http://jsfiddle.net/gxUhH/52/

The problem now is that when the page is scrolled on a touch screen device, it then becomes jerky. Presumably this is from the additional processing power required.

I think the solution would be to pause the animation on scroll and then play again after scroll has complete. I do not know how to a开发者_Go百科ccomplish this. I'd also enjoy hearing any other suggestions on the matter.

The fiddle above will show you it all functional. WebKit only at the moment.

Any ideas?

Marvellous

I had some issues with flickering and jerky animations and this bit fixed it up:

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;