Found a way to cut my CSS animation code in half last Thursday

I was building this complex card flip animation for a client project and my code was getting out of hand, about 80 lines just for the hover states. Tried using CSS variables with custom properties to handle the transform values and timing functions dynamically instead of hardcoding each variant. Worked way better than expected, cut it down to 35 lines and it's way easier to tweak now. Anyone else using custom properties to simplify their battle strategies?

2 comments

2 Comments

reese5511mo ago

Custom properties are great but nobody talks about how they work with container queries yet. Just tested combining them with @container and the cascade gets weird if you don’t scope your variables right. Helps to set fallback values in your var() calls so nothing breaks across different screen sizes.

sam_harris681mo ago

Yeah exactly, the cascade gets real finicky if you don't set those fallbacks.