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]?

Navigation

#1 by (2 votes)

3

Doing a simple CSS animation to increase height of a div using transition: all and a question came up. See 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 all the result is the same, since all will apply the effect to any changed property (provided ownership is supported).

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

css

asked by anonymous 03.06.2018 / 00:59

1 answer

DIV leaving the screen How to consume validation function?

score 2 · Accepted Answer

Dude, the big problem is performance. Using transition:all consumes a lot of browser functionality, it will "try" to animate all styles of the class, even if they have no animation, this leaves the browser waiting for something that will not happen and ends up costing expensive browser performance , even more so if you use this throughout your css.

Another point is that since% w / o your sim animation loses performance, it may lose its fluidity and "skip steps", as if it loses FPSs in the transition.

When you have to animate more than one thing with transition:all 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 no to use transition

Tip: You can add in your element transition:all to enable GPU hardware acceleration when animating the element, this works for animations with transform:translateZ(0) . If you are interested, look for the @keyframes property, but this is only worth using if you use it with JS, since you need to add and remove before and after the animation so that you do not consume the browser feature without being animated enabled.