Writing Cleaner CSS Transitions

For silky smooth transitions, it’s essential to be explicit about the properties you want to transition.

A common approach is to use the transition shorthand:

.btn {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

The more properties we add, the longer and more tangled this transition becomes. Even with variables, there’s a high risk of defining a property, duration or easing value incorrectly.

Suggestion

Rather than repeating the same transition for each property, define it once with shorthand and compliment with transition-property:

.btn {
  transition: 0.2s ease;
  transition-property: color, background-color, border-color;
}

Less repetition, more consistency.