CSS3过渡:"过渡:全部"比"过渡: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&background-coloron :hover.

但事实证明,您可以针对转换定位多个规则,因此您永远不需要求助于该all设置.

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