标准HTML5动画

Question

我已经注意到在HTML5中的动画支持是支离破碎的。我只是想知道是否有什么东西可以尝试解决这个问题？

例如这里的演示，

http://www.webkit.org/blog-files/3d-transforms/transform-style.html

指定特定于webkit的转换。这意味着它可以在Chrome、安卓(使用普通浏览器)、iOS (也使用普通浏览器)上运行。

它不适用于IE、Firefox、Opera Mobile等。

另外，我注意到我的Android2.3.5不能在演示中正确显示动画。

火狐也发布了他们自己的动画。

我来自silverlight背景，我们的应用程序有相当多的动画。我想迁移到HTML5，但这可能是一个问题。

Answer 1

很抱歉让你失望了，但是在html5 / css3中，一切仍然是高度不稳定的。浏览器很早就实现了“尽可能酷”的特性。为了保留现有脚本的功能，即使标准发生了变化，他们也开始在某个时候添加浏览器前缀。

现在，你必须在CSS中为动画使用多个定义，甚至包括一些IE9的JS回退--因为IE开始支持IE10中的翻译(尽管在IE9中有一个变焦的变通方法)

有关支持的功能的快照，请查看CanIUse.com：http://caniuse.com/transforms2d和硬件加速版本http://caniuse.com/transforms3d也很不错，这是一个很好的资源：http://www.css3files.com/transform/

如果你在5个前缀定义之后加上标准定义，新的浏览器将会使用它。除此之外，当你尝试使用一个花哨的css特性时，只需用“跨浏览器”谷歌一下就可以了，你应该得到一些像样的生成器的链接，这些生成器会帮你完成繁重的工作，直到你把它牢记在心。