I'm curious is using transition: all 0.2s;
has any performance implications vs. specifying properties explicitly. Let me show you what I mean:
.button {
// I want to transition the border- & background-color on hover
border-color: lime;
background-color: red;
// I could specify `all` as the property to transition...
transition: all 0.2s ease-in;
// ...but is it more performant to write it this way?
transition: border-color 0.2s ease-in,
background-color 0.2s ease-in;
// Here's the :hover state:
&:hover {
border-color: blue;
background-color: green;
}
}
I feel like if you specify all
then the browser must be observing all properties for changes and (if they are animatable properties). Would the second example where I specify each property individually not be better, as then the browser only has to watch those properties for changes?
Thanks in advance, I've always been curious about this.