CSS3转换：是“transition：all”慢于“transition：x”？ [英] CSS3 Transitions: Is "transition: all" slower than "transition: x"?

问题描述

我有一个关于css3过渡属性渲染速度的问题。

I have a question about rendering speed for the css3 transition property.

假设我有一些元素：

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} 。但我的问题是：它的动画渲染的目标每个元素的具体过渡属性的平滑度和速度是否更快？例如：

It's much more efficient to target all of the transitions for all of those elements using one declaration div, span, a {transition: all}. But my question is: would it be "faster" in terms of the smoothness and quickness of the animation rendering to target each element's specific transition property? For example:

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}

我的逻辑是，如果cssengine所有转换属性，即使一个元素只有一个单一的属性，它可能会减慢事情。

My logic in asking this is that if the css "engine" has to search for "all" transition properties even if there is just one single property for an element, that it might slow things down.

有没有人知道是否是这样的情况？非常感谢！

Does anyone know if that's the case? Thanks!

推荐答案

是的，使用 transition：all 性能。可能有很多情况下浏览器会查看是否需要进行转换，即使用户看不到它，如颜色变化，尺寸更改等。

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.

我可以想到的最简单的例子是： http://dabblet.com/gist/1657661 - 尝试更改缩放级别或字体大小，你会看到一切都变成动画。当然，不可能有很多这样的用户交互，但可能会有一些接口更改，可以导致回流和重绘在一些块，

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.

因此，一般来说，建议不要使用 transition：all 并使用直接转换。

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

还有一些其他的东西可能会出错的 all 转换，像在页面加载时的动画的飞溅，它将首先呈现块的初始样式，然后应用带有动画的样式。在很多情况下，它不会是你想要的东西：）

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 :)

这篇关于CSS3转换：是“transition：all”慢于“transition：x”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！