Joe Bell
July 12, 2020

Writing Cleaner CSS Transitions

Less repetition, more consistency

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.

  • likes
  • reposts

Enjoyed this article? Please share and let me know your thoughts.

Copyright © 2020 Joe Bell