HTML5 -Übergang Perfomance auf dem iPhone 4

Question

Die damit verbundene Frage wurde hier gestellt:CSS3 oder JQuery -Animation mit gegebenem Schritt

Jetzt möchte ich fragen, gibt es einen Übergang (CSS3 oder JQuery), der auf dem iPhone 4 / iPad / iPad 2 funktioniert, wir können die Vollbildrutschen (Bilder oder sogar Rahmen, voll mit Steuerungen) allmählich ändern und ist schnell genug glatt sein?

Grüße,

Answer 1

Für die maximale Leistung auf iOS -Geräten verwenden Sie TranslateZ (0) oder Translate3D (0,0,0) in Ihrer Übergang/Animation, um die Hardwarebeschleunigung über die GPU zu aktivieren.

Weitere Informationen hier: http://www.html5rocks.com/en/tutorials/speed/html5/#toc-visual-fidelity

Beispiel dafür, wie Sie dies implementieren würden:

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