在 iPad 1 上使用 HTML5 和 CSS3 应用程序进行开发后，我们对 CSS3 动画/过渡/变换（硬件加速）的性能感到失望。我们希望 iPad 2 能够提供更多功能并在这些方面表现更好。但事实真的是这样吗？
我们无法使用 iPad 2，并且听说 iPad 2 在处理 CSS3 动画/过渡/变换方面仍然存在故障、缓慢、不可靠的问题。
任何人都可以阐明这一点吗？
After developing with HTML5 and CSS3 applications on the iPad 1, we have been disappointed with the performance of CSS3 animations/transitions/transforms (hardware accelerated). We're hoping that the iPad 2 will bring more power and perform better with this stuff. But is that really the case?
We don't have access to an iPad 2 and have heard rumours that the iPad 2 still has glitchy, slow, unreliable issues with how it handles CSS3 animations/transitions/transforms.
Can anyone shed any light on this?
发布评论
评论（3）
我还在开发一个专门针对 iPad 的 Web 应用程序，并使用 HTML5/CSS3。我有相反的经历 - 我对动画的流畅程度感到惊讶，即使在 iPad 1 上也是如此。Michael Mullany 是对的 - 大多数 2d 变换无法获得 GPU 加速 - 确保您使用的是 Transform3d 或 tranformZ(0)。
在 iPad 2 上，动画几乎完美无缺 - 与更好的本机应用程序一样好。
当然 - 这取决于您要制作的动画。
就我而言，它是一个“轮播”，有十几个面板，每个面板都包含一些表单元素。 （但是，变换是简单的左/右动画）。
如果您还没有看过它们，这里有关于这个主题的两场精彩的（IMO）演讲：
Paul Irish：http://paulirish.com/2011/dom-html5-css3-performance
亚历克斯·拉塞尔：http://dayofjs.com/videos/22158462/web-browsers_alex-russel
据我所知，CSS3 动画很容易出错（或很差），而且性能也会受到影响。然而，经过一些调整，它看起来非常棒。
另外 - 说出您对内容和非正统 UI 的看法，但请尝试 http://stuffwhitepeoplelike.com/ iPad。大量丰富、流畅且复杂的动画在 iPad 上运行良好，在 iPad 2 上运行也很棒。（当然，也有一些动画在两者上都非常卡顿，所以这表明使用它们是多么重要明智地...）
祝你好运！
I'm also developing a web app targeted specifically at the iPad, and using HTML5/CSS3. I had the opposite experience - I'm surprised at how smooth animation is, even on the iPad 1. Michael Mullany is right - most 2d transforms don't get GPU acceleration - be sure you're using transform3d or tranformZ(0).
On the iPad 2, the animation is nearly flawless - as good as the better native apps.
Of course - it depends on what you're animating.
In my case, it's a "carousel", with over a dozen panels, each containing a handful of form elements. (However, the transforms are simple left/right animation).
If you haven't seen them already, here's two spectacular (IMO) talks on the subject:
Paul Irish: http://paulirish.com/2011/dom-html5-css3-performance
Alex Russel: http://dayofjs.com/videos/22158462/web-browsers_alex-russel
From what I've seen, CSS3 animations are VERY easy to do wrong (or poorly), and performance suffers. With some tweaking however, it seems pretty awesome.
Also - say what you will about the content and the unorthodox UI, but try http://stuffwhitepeoplelike.com/ on your iPad. Plenty of rich, smooth, and complex animations that run well on the iPad, and great on the iPad 2. (Of course, there's also some animations that are pretty janky on both, so it goes to show how important it is to use them judiciously...)
Good luck!
iOS 5 也将 Nitro 引擎引入主屏幕 Web 应用程序，请阅读此处 http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars
iOS 5 brings the Nitro Engine to home screen web apps too, read here http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars
取决于您的网络应用程序是否添加到主屏幕。与原生 Safari 移动设备相比，加速对于主屏幕 Web 应用程序来说并不那么重要。
您可以阅读这篇文章： http://macapper.com/2011/03/21/web-apps-saved-to-home-screen-anchor-safari-performance/
Depends if your web app is added to the home screen. Acceleration is less importante to the home screen web app than on native safari mobile.
This is an article you can read : http://macapper.com/2011/03/21/web-apps-saved-to-home-screen-anchor-safari-performance/