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--尝试更改缩放级别或字体大小，您会看到所有内容都变为动画。当然，不可能有很多这样的用户交互，但可能会有一些界面更改，导致某些块中的回流和重新绘制，这可能会告诉浏览器尝试并动画化这些更改。

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

all转换还可能出现其他一些问题，比如页面加载时的动画飞溅，它首先渲染块的初始样式，然后将样式应用于动画。在很多情况下，这不是你想要的：）

Answer 2

我一直在使用all来处理需要动画化多个规则的情况。例如，如果我想更改color&CCD_ 7对CCD_。

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

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