Now that it appears Webkit is slowly emerging as the defacto layout engine of most popular browsers (see Opera’s recent announcement), it wouldn’t do harm to reacquaint oneself with the nitty-gritty of optimizing Webkit across a variety of platforms. While coding keyframes is straightforward and streamlined in CSS3, there are some drawbacks to using Webkit - namely it’s sluggish response time on mobile devices.
While most desktop browsers use hardware acceleration to deliver smooth animations, this same behavior is not performed as a default on iOS or Android. Instead most devices will only use their CPU to process graphics; you are likely to run into glitchy, slow, animations if you attempt to run multiple or complex transitions. There is however, an interesting workaround to this that is simple to implement: trick your mobile device into thinking it is running 3D animations as opposed to 2D ones.
Most mobile devices will use their GPU to process animations if they are three-dimensional. Simply add this line to your keyframes to get a quick boost for your animations.