What’s the difference in using Transition: all and Transition: [specific property]?

Question

Making a simple CSS animation to increase the height of a div using transition: all and a question has arisen. Look at the 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 just want to apply the transition in height, but also using the all the result is the same, since the all will apply the effect to any modified property (provided the property is supported to do so).

So it’s not always best to use the all since it takes all properties? Use all implies some disadvantage in relation to using a specific property in transition (as height, width, background-color etc.)? If this is indifferent, why not just use the all in any event?

Answer 1

Face the big problem there is the performance. Use the transition:all consumes too much feature of the browser, because it will "try" animate all styles of the class, even if they do not have animation, it leaves the browser waiting for something that will not happen and ends up costing expensive for the performance of the browser, even more if you use this in all your css.

Another point is that like the transition:all your animation in yes loses performance, it can lose fluidity and gets "skipping steps", as Fpss loses in transition.

When you have to cheer up more than one thing with the transition you can do it this 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 overall the recommended is nay use the transition:all

Tip: You can add in your element transform:translateZ(0) to activate hardware acceleration via GPU when animating the element, this also works for animations with @keyframes. If it is of interest to you look also about the property will-change, but this is only worth it if you use it together with JS, because you need to add and remove before and after the animation to avoid consuming the browser resource without being animated.