Why does nobody talk about using CSS custom properties for animation timing instead of hardcoded values? | CSS Battle Tactics

Taylor Moore · 2026-09-25T02:15:05.359039+00:00

I used to hardcode every animation duration and delay right in the keyframes and transition shorthand, thinking it was simpler. Then a guy on my team in Portland reviewed my pull request and said flat out that my dropdown menu felt sluggish at 0.4s and that I should stop guessing and make timing a variable. I pushed back for about two weeks because I thought custom properties in animation were too much setup for zero payoff. But he showed me one trick: define - speed-fast: 150ms, - speed-med: 300ms, - speed-slow: 600ms on :root, then swap them per component. Suddenly I could tune the whole site's feel by editing three numbers instead of hunting through 40 rules. I also started using calc() with those vars for staggered delays, like calc(var( - speed-fast) * 2), and my card hover stack finally felt right instead of twitchy. The biggest surprise was how easy it got to respect prefers-reduced-motion, just set the vars to 1ms in a media query. Has anyone else moved their timing to custom props, and do you keep separate vars for entry and exit or just share one scale?

The Design Community Hub

Loading…

Why does nobody talk about using CSS custom properties for animation timing instead of hardcoded values? | CSS Battle Tactics - The Design Community Hub