2

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.

Dave Lunny
  • 750
  • 8
  • 21

0 Answers0