Standards Based Development

Standards Based Development


.myAnimation {
    /* your regular animation and presentation CSS here */

    /* add hardware acceleration! */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

Example above forces hardware acceleration.

ALSO GO HERE http://ariya.ofilabs.com/2013/06/optimizing-css3-for-gpu-compositing.html">Optimizing CSS3 for GPU Compositing

For a more comprehensive take on this subject, refer to my previous talk Fluid User Interface with Hardware Acceleration (read the slide deck, watch the 28-min video on YouTube). There I also explained the workaround (read: hack) if you still insist on background color animation. Some other related articles you might want to read: