Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 Transitions: Is "transition: all" slower than "transition: x"?

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

Suppose I have a number of elements:

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} 

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} 

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!

like image 877
HandiworkNYC.com Avatar asked Jan 20 '12 20:01

HandiworkNYC.com


People also ask

Should I use transition all?

CSS animations and transitions are great. They give us the power to spice up web experiences and help to make them feel more 'alive'. However, at the same time, animations and transitions can make a web experience far worse, when done the wrong way.

What is CSS3 transition?

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

Which transition takes maximum time?

As Guruprasad J Rao mentioned, the longest transition-duration possible is the number of seconds contained within the largest integer possible, which happens to be 2147483647. If anybody is curious, a transition-duration of 2147483647s is 68.24 years (including leap years).

What are differences between CSS transformations and transitions?

So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another.


2 Answers

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

like image 181
kizu Avatar answered Sep 17 '22 15:09

kizu


I've been using all for cases where I needed to animate more than one rule. For example, if I wanted to change the color & background-color on :hover.

But it turns out that you can target more than one rule for transitions, so you never need to resort to the all setting.

.nav a {   transition: color .2s, text-shadow .2s; } 
like image 32
Duncan Mckenna Avatar answered Sep 19 '22 15:09

Duncan Mckenna