Thanks to a great tip from Lucas Hugdahl on Twitter, here’s how to use CSS custom properties (variables) in your transforms so you don't need to rewrite the whole
transform rule in order to
transition (animate) a single property.
Let’s take the simple example of a
button that we want to increase in size when hovered.
By using a custom property for the
scale value, we can keep things DRYer in our
:hover rule by only updating that variable rather than rewriting the entire
The button HTML:
<button>Hover over me</button>
transition: transform .5s ease-in-out;
transform: translateX(-50%) translateY(-50%) scale(var(--scale, 1));