Limits on Animating Unregistered CSS Custom Properties

The CSS Cascading Variables specification does not mandate that unregistered custom properties be animatable. Without an @property rule, the property is treated as a regular CSS variable, and browsers may simply ignore transition or animation timing, causing the value to snap to the target instantly.

• Likely explanation: In the absence of registration, the property has no defined animated type, initial value, or inheritance behavior. The animation engine therefore has no interpolatable range, so it either discards the animation or falls back to a direct assignment.
• Confirmed facts: The CSS Properties and Values API Level 1 makes registration optional for animation, but implementation varies. Chrome, Edge and Safari can animate unregistered properties behind experimental flags, while Firefox generally ignores such animations entirely.

1. Check whether an @property rule declares the custom property with a type, initial value, and inherit flag.
2. Open the page in the target browser and inspect the custom property’s computed style while a transition or animation is active. Observe whether the property interpolates smoothly or snaps immediately.
3. If animation is unsupported, either register the property with @property or drive the value change via JavaScript, updating the variable after each frame.

To tailor the recommendation, please indicate which browser(s) you are primarily targeting. The presence or absence of experimental flag support can change the suggested approach.