iPhone 4 上的 HTML5 过渡性能

发布于 2024-12-10 16:18:38 字数 256 浏览 3 评论 0原文

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

现在我想问，是否有适用于 iPhone 4 / iPad / iPad 2 的过渡（CSS3 或 jQuery），可以逐渐更改全屏幻灯片（图像甚至框架，充满控件），并且速度足够快以使其平滑？

问候，

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

記柔刀 2024-12-17 16:18:38

为了在 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;
    }       
}

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

回复收藏 0 原文

~没有更多了~