iPhone 4上的HTML5過渡效果

Question

相關問題已在此處提出： 具有給定步驟的CSS3或jQuery動畫

現在我想問一下，是否有適用於iPhone 4 / iPad / iPad 2的轉換（CSS3或jQuery），可以逐步更改全屏幻燈片（圖像甚至幀，充滿控件）並且足夠快順利嗎？

問候，

Answer 1

要在iOS設備上獲得最佳性能，請在轉換/動畫中使用translateZ（0）或translate3d（0,0,0）以通過GPU啟用硬件加速。

更多信息： http ： //www.html5rocks.com/en/tutorials/speed/html5/#toc-visual-fidelity

如何實現這個的示例：

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