What's the difference in using transition: all and transition: [specific property]?

Question

What's the difference in using transition: all and transition: [specific property]?

Doing a simple animation in CSS to increase the height of a div using transition: all and a question arose. See example:

div{
   width: 100px;
   height: 30px;
   background: red;
   transition: all 1s ease;
}

div:hover{
   height: 100px;
}

<div>Passe o mouse</div>

I could use transition: height, since I only want to apply the transition on height, but also using all the result is the same, since all will apply the effect to any changed property (as long as the property has support for such).

So it's not better to always use all already that takes all the properties? Using all implies some disadvantage compared to using a specific property in transition (such as height, width, background-color etc.)? If this is indifferent, why not just use all in any case?

3

css css-transições

Author: Sam, 2018-06-02

Source

1 answers

score 2 · Accepted Answer

Dude the big problem ai is performance. Using transition:all consumes a lot of browser resource, because it will" try " to animate all the styles of the class, even if they do not have Animation, this leaves the browser waiting for something that will not happen and ends up costing dear browser performance, even more if you use this in all your css.

Another point is that since transition:all your SIM animation loses performance, it can lose fluidity and is "jumping steps" , as if FPSs is lost in transition.

When you have to animate more than one thing with transition you can do it that way.

div{
   width: 100px;
   height: 30px;
   background: red;
   transition: height 1s ease, background 1s ease;
}

div:hover{
   height: 100px;
   background: blue;
}

<div>Passe o mouse</div>

So in general the recommended is not use the transition:all

Tip: Vc can add in your element transform:translateZ(0) to enable hardware acceleration via GPU when animating the element, this tb works for animations with @keyframes. If it is of your interest also look for the property will-change, but this is only worth it if it is to be used together with JS, because you need to add and remove before and after the animation so as not to be consuming browser resource without being with the animation enabled.