我应该依赖 CSS3 来制作动画，还是使用 JavaScript 来为非 WebKit 浏览器带来好处？答案

【问题标题】：Should I rely on CSS3 for animation, or use JavaScript for the benefit of non-WebKit browsers?我应该依赖 CSS3 来制作动画，还是使用 JavaScript 来为非 WebKit 浏览器带来好处？
【发布时间】：2012-04-19 03:54:39
【问题描述】：

我正在开发一个网站，但我仍处于构思阶段。加上一些漂亮的简单变换动画会很酷。

但是现在我不确定是否应该使用最新的技术（CSS3/HTML5）来制作我的动画，以便在 webkit 浏览器上运行良好，并为非 webkit 创建一个备用网站。这可能不会花费我很多时间并且结果非常顺利。

或者我可以尝试用 JS 来伪造动画，这将花费我更多的时间来解决问题，并且看起来不会那么漂亮和流畅。目前也没有真正直接/漂亮的解决方案可用。 Heygrady 的 Transform3d 很接近，但缺少一些我需要的功能，而且由于我有限的 JS 技能，我无法深入研究并自己构建它。

【问题讨论】：

离题了。在programmers.stackexchange.com上试试

标签： javascript html animation css webkit

【解决方案1】：

在我看来，使用 HTML5/CSS3 制作动画。只要它不影响核心功能（例如，没有支持的访问者仍然可以导航/阅读/提交表单/等），然后将漂亮的东西留给那些支持它的浏览器。

Javascript 动画可以很流畅，看起来很不错，但是正如你所说，它会花费更长的时间来编写并且更难维护。

如果我要重新设计现有网站，那么我会检查分析/服务器日志，以了解目标受众最流行的浏览器。如果其中 90% 都在 IE7 上，那么我将相应地对网站进行编码！

希望有帮助

【讨论】：

感谢服务器日志提示，我正在处理的网站没有设置分析。但当然，服务器日志可以救我！
如果它是 Linux 上的 Apache，那么有一些很棒的命令可用于剥离用户代理字符串。有关信息，请参阅the-art-of-web.com/system/logs/#section_2。然后通过awk 管道输出以计算用户代理字符串的出现次数，请参阅catonmat.net/blog/wp-content/uploads/2008/09/awk1line.txt
您可以通过使用适当的供应商前缀使您的动画在其他现代非 webkit 浏览器中正常工作：-o- 用于 Opera，-ms- 用于 IE，-moz- 用于 Firefox 等。

【解决方案2】：

我认为这取决于您的目标受众。

在这些情况下使用 CSS：

对于 iOS 设备，因为 CSS 过渡是硬件加速的
需要 3D 转换，因为您只能使用 CSS 进行转换

在这些情况下使用 JavaScript：

您需要对帧速率或移动对象的精确位置进行精细控制，因为 CSS 无法做到这一点

【讨论】：

【解决方案3】：

根据您想要在动画方面做什么，jQuery 可能会帮助您更轻松地完成它，并具有合理的性能。

http://api.jquery.com/category/effects/

【讨论】：