CSS3 vs Javascript only转换

Question

对Apple Safari360演示https://developer.apple.com/safaridemos/threesixty.php印象深刻

这似乎也适用于Firefox。

谁能总结一下在动画和转换中使用CSSonly和javascript的优缺点？

Answer 1

我个人的观点是，以房子为比喻，HTML是用来打地基的，CSS是用来粉刷房间的，而JS是用来翻新的。如果您想要添加一个水特征，CSS将负责该特征的外观，但JS将使水通过它。

类似地，我可以用CSS制作一个时钟，并用简单的CSS动画让它旋转(时针持续12小时，分针持续1小时，秒针持续1分钟)，但我更愿意用JavaScript制作它，因为JS可以检查用户的时钟并保持自身同步。特别地，如果浏览器由于用户在其计算机上有太多的打开或者通常仅仅是旧计算机而延迟，则这一点尤其重要。

此外，我非常确定CSS对于动画每秒必须重新评估几百次，而使用JS您可以明确地将帧率设置为更合理的值，例如每秒4帧的间隔为250ms (足够时钟和进度条使用)或25ms (40fps)的更高级动画(因为它们是游戏，所以偶尔在我的网站中使用)。有了这种控制，你可以管理你网站的效率，等等。

另一方面，CSS转换非常有用--这是因为它们会影响元素的外观，就像CSS应该做的那样。然后，使用JS来控制它们，可以用最少的代码创建非常复杂的动画(例如，在前面提到的游戏中，有一个完整的序列，这在纯CSS中是完全不可能的，但在JS中使用CSS转换非常容易)。

这一切都是关于在正确的工作中使用正确的工具。