HTML5 transition perfomance on iPhone 4

问题

The related question has been asked here: CSS3 or jQuery animation with given step

Now I'd like to ask, is there a transition (CSS3 or jQuery) that works on iPhone 4 / iPad / iPad 2, lets to change full-screen slides (images or even frames, full of controls) gradually and is fast enough to be smooth?

Regards,

回答1:

For maximum performance on iOS devices, use translateZ(0) or translate3d(0,0,0) in your transition/animation to enable hardware acceleration via the GPU.

more info here: http://www.html5rocks.com/en/tutorials/speed/html5/#toc-visual-fidelity

example of how you would implement this:

CSS

.fadeOut{ -webkit-animation: fadeout 750ms; }
@-webkit-keyframes fadeout {
    0% { -webkit-transform: translateZ(0);
        opacity:1;
    }
    100% { -webkit-transform: translateZ(0);
        opacity:0;
    }       
}

.fadeIn{ -webkit-animation: fadein 750ms; }
@-webkit-keyframes fadein {
    0% { -webkit-transform: translateZ(0);
        opacity:0;
    }
    100% { -webkit-transform: translateZ(0);
        opacity:1;
    }       
}

来源：https://stackoverflow.com/questions/7806514/html5-transition-perfomance-on-iphone-4