Managing the Transition CSS Property

The transition CSS property is something that I don’t see talked about often and yet it’s one of the more difficult places to keep things consistent. If you’re working in a larger codebase, especially with enterprise web software like me, it’s easy for things to become inconsistent and seem impossible to apply constraints to. I chalk this up to a few different reasons:

• in a situation where you need to add an additional transition property when one is already set, you need to remember to re-apply the previous transition property otherwise it will be overwritten.
• the transition property inherently includes every other CSS property
• the transition property handles a few different values that you might want to modify for different contexts (delay, duration, timing, property being transitioned, etc)

I have seen times where people defined a specific timing property in a variable and reused that, but I think that doesn’t provide enough support. If you’re trying to establish a consistent set of rules for exactly how other developers should be writing their CSS and you want to really control just how flexible the transition property should be, we’ll have to take things further. Setting only one option doesn’t do enough either, we have to consider any edge cases we might have. For instance, you can have a fast…