DEV Community


Writing Cleaner CSS Transitions

Joe Bell
Originally published at ・1 min read

Originally published at 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.


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)