CSS3过渡: “过渡: 全部”比“过渡: x”慢吗？

我有一个关于 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“ engine”必须搜索“ all”转换属性，即使一个元素只有一个属性，那么它可能会降低速度。

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

21497

小开

最佳答案

Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.

The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.

So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.

There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)