iPhone 4 上的 HTML5 转换性能

【问题标题】：HTML5 transition perfomance on iPhone 4iPhone 4 上的 HTML5 转换性能
【发布时间】：2011-12-10 00:40:29
【问题描述】：

相关问题已在此处提出： CSS3 or jQuery animation with given step

现在我想问一下，是否有适用于 iPhone 4 / iPad / iPad 2 的过渡（CSS3 或 jQuery），让我们逐渐更改全屏幻灯片（图像甚至框架，充满控件）和速度够快吗？

问候，

【问题讨论】：

标签： iphone performance html css css-transitions

【解决方案1】：

为了在 iOS 设备上获得最佳性能，请在过渡/动画中使用 translateZ(0) 或 translate3d(0,0,0) 以通过 GPU 启用硬件加速。

您将如何实现的示例：

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

【讨论】：