Do not transition them all

,

Transitions are a pretty cool thing in CSS. I like them very much, they can impress users and you can really show off CSS skills with them! <3 But some of my students keep using all as a property they want to transition, when in reality they just want to transition background-color and color property.

1
2
3
.text-hover {
  transition: all .5s ease-in-out;
}

When we transition all property, we are transitioning all the properties in that element. All of them! From font-size and text-align to border-color. Is that really necessary? I am no hardware expert, but I think it might be too much for any machine to transition all the properties at the same time. It is just extra work for the browser and your machine. Why transition text-underline property if you just want to add transition to the color?

How can we fix this? Let’s just transition the properties that are going to transition:

1
2
3
4
5
6
7
.text-hover {
  transition: color .5s ease-in-out, background-color .5s ease-in-out;
  &:hover {
    color: yellow;
    background-color: black;
  }
}