CODEWITHSUNDEEP
iphoneperformancehtmlcsscss-transitions
noober
noober

Reputation: 4938

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,

Upvotes: 1

Views: 589

Answers (1)

1nfiniti
1nfiniti

Reputation: 2070

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;
    }       
}

Upvotes: 3

Related Questions