…and I’m back! Not content with the hacky previous solution of animating spritesheets in CSS and with the help of the fabulous Doug Neiner, I created four individual ways to animate sprites via CSS3 Animations, which each of them having their own advantages. There goes the list:
This is by far the cleanest solution, and the solution I recommend for desktop browsers. It animates the background position, doesn’t involve any hacks and uses the new step-start easing property to disable easing, which, I found out, is implement in latest WebKit and Chrome already. Woot!
Unfortunately, not all browsers (i.e. Safari, on both iPhone and iPad at least) support the step easing functions at this point, so a workaround is still required here. However, Doug Neiner found a better hack than me, which goes like this: Instead of doing the crappy resizing, simply double the keyframes and have a very low percentage keyframe before every change, which tricks out the easing. I recommend reading the source of the demo to get a clear picture. It rocks, and works reliably!
I really really wanted to see if it was possible to accelerate animations on browser that feature hardware acceleration on CSS Transforms – in particular, iPad and iPhone’s Safari. As it turns out, it is possible – simply add an inner <div> resize it to the spritesheet full dimensions and put the background image there, set the parent div to overflow hidden and animate using translate3d(x,y,0). This, as it turns out, gives roughly a 300-400% performance increase on iPad – not bad, huh?
Might be obvious already – the above is great, but still looks broken on iPad. So again, we are using the brilliant little hack Doug came up with.
That’s it (harhar!), enjoy: Demo (run this on any WebKit browser)