CSS3过渡："transition: all“比"transition: x”慢吗？

Question

我有一个关于css3转换属性的渲染速度的问题。

假设我有一些元素：

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

使用一个声明div, span, a {transition: all}来定位所有这些元素的所有转换要高效得多。但我的问题是:在动画渲染的流畅性和快速性方面，针对每个元素的特定过渡属性是否会“更快”？例如：

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

我问这个问题的逻辑是，如果css“引擎”必须搜索“所有”转换属性，即使一个元素只有一个属性，它也可能会减慢速度。

有没有人知道是不是这样？谢谢!

Answer 1

是的，使用transition: all可能会导致性能上的重大缺陷。在很多情况下，浏览器会查看是否需要进行转换，即使用户看不到它，比如颜色变化、尺寸变化等。

我能想到的最简单的例子是：http://dabblet.com/gist/1657661 -尝试改变缩放级别或字体的大小，你会看到所有的东西都变成了animated.Of，当然不可能有很多这样的用户交互，但可能会有一些界面更改，这可能会导致一些块中的回流和重绘，这可能会告诉浏览器尝试并动画这些更改。

因此，一般来说，建议您不要使用transition: all，而是使用直接转换。

在all转换中还有一些其他的错误，比如页面加载时动画的飞溅，它会首先呈现块的初始样式，然后将样式与动画一起应用。在很多情况下，这不是你想要的东西:)

Answer 2

在需要为多个规则设置动画的情况下，我一直在使用all。例如，如果我想更改:hover上的color & background-color。

但事实证明，您可以针对多个规则进行转换，因此您永远不需要求助于all设置。

.nav a {
  transition: color .2s, text-shadow .2s;
}