Перенос перехода HTML5 на iPhone 4

Question

Связанный вопрос был задан здесь:Анимация CSS3 или jQuery с данным шагом

Теперь я хотел бы спросить, есть ли переход (CSS3 или jQuery), который работает на iPhone 4 / iPad / iPad 2, давайте постепенно изменить полноэкранные слайды (изображения или даже рамы, полные элементов управления) и достаточно быстро быть гладким?

С уважением,

Answer 1

Для максимальной производительности на устройствах iOS используйте Transtatez (0) или Translate3d (0,0,0) в вашем переходе/анимации, чтобы обеспечить аппаратное ускорение через графический процессор.

Подробнее здесь: http://www.html5rocks.com/en/tutorials/speed/html5/#toc-visual-cidelity

Пример того, как вы бы это реализовали:

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