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.
views