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

【问题标题】：CSS3 Transitions: Is "transition: all" slower than "transition: x"?CSS3 过渡：“过渡：全部”是否比“过渡：x”慢？
【发布时间】：2012-02-15 08:59:17
【问题描述】：

我对 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“引擎”必须搜索“所有”过渡属性，即使一个元素只有一个属性，它可能会减慢速度。

有人知道是不是这样吗？谢谢！

【问题讨论】：

这也是我的理论，但在实践中我从未注意到任何差异。
我希望在屏幕上实际执行动画会比解析 CSS 更昂贵。除非你滥用系统，否则我不会太担心。
我认为如果有差异，它会以毫秒为单位——但我想知道是否有微小的差异。谢谢你的 cmets
这对我来说是“供应商特定的实现细节”......

标签： performance css css-transitions

【解决方案1】：

是的，使用transition: all 可能会导致性能下降。在很多情况下，如果需要进行转换，即使用户看不到，浏览器也会查看，例如颜色变化、尺寸变化等。

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

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

all 过渡还有其他一些问题，例如页面加载时动画的飞溅，它首先会渲染块的初始样式，然后将样式与动画一起应用。在很多情况下，这不是您想要的:)

【讨论】：

链接已失效，希望看到您的示例
修复了整个 dabblet 的链接
我也想看看这个例子。也许它已经不存在了？
这并不是对原始问题的真正答案。是的，您可能会意外地转换您不打算制作动画的东西，但 OP 会询问“全部”规则是否会自行导致任何性能下降，假设没有触发意外转换。
@OwenMasback 但他明确表示all 强制浏览器在需要进行转换时执行more checks

【解决方案2】：

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

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

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

【讨论】：