CSS3过渡：“过渡：全部”是否比“过渡：x”慢？

我对css3 transition属性的渲染速度有疑问。

假设我有许多要素：

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的“引擎”是否必须搜索“所有”过渡属性，也可能会使事情变慢。

有谁知道是这样吗？谢谢！

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

我能想到的最简单的示例是：http : //dabblet.com/gist/1657661－尝试更改缩放级别或字体的大小，您会看到所有内容都变成了动画。当然不可能这类用户互动很多，但可能会有一些界面更改，这些更改可能导致某些块中的重排和重新绘制，这可能会告诉浏览器尝试对这些更改进行动画处理。

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

all过渡还可能导致其他一些问题，例如页面加载时的动画飞溅，在这种情况下，它将首先渲染块的初始样式，然后将其应用于动画。在很多情况下，这不是您想要的东西：)

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

但是事实证明，您可以针对多个过渡规则，因此您无需诉诸该all设置。

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