DEV Community

loading...

Writing Cleaner CSS Transitions

Joe Bell
twitter.com/joebell_
Originally published at joebell.co.uk ・1 min read

Originally published at joebell.co.uk on 12th July 2020

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Less repetition, more consistency.

Discussion (0)