iPhone 4上的HTML5转换性能 [英] HTML5 transition perfomance on iPhone 4

问题描述

相关问题已在这里提出：
CSS3或jQuery动画与给定的步骤

现在我想问，是否有一个过渡（CSS3或jQuery）适用于iPhone 4 / iPad / iPad 2 ，让我逐渐改变全屏幻灯片（图像，甚至是框架，充满控制），并且速度足够平滑吗？

注意，

解决方案

要在iOS设备上获得最佳性能，请在转换/动画中使用translateZ（0）或translate3d（0,0,0） GPU。

更多资讯： http://www.html5rocks.com/en/tutorials/speed/html5/#toc-visual-fidelity

示例

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

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,

解决方案

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

这篇关于iPhone 4上的HTML5转换性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！