[BUG] CSS calc() with division transitions incorrectly to zero

[kickbelldev]

Note

Motion for Vue issues: Please open in the Motion for Vue repo.

1. Read the FAQs 👇

2. Describe the bug

When transitioning from a CSS calc() expression that involves division (e.g., calc(var(--spacing-variable) / 2)) to 0, the value resolves to something like calc(0% + NaN * 1px), resulting in an unnatural animation.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/9x4jhy

4. Steps to reproduce

Steps to reproduce the behavior:

1. in the codesandbox above, we have a motion.div components with the symptom and buttons to control it, and I've display the style.transform property of components.

2. the buttons are a button to change the x, y value of the animate property of motion.div and a button to animate the value to 0 directly with useAnimate.

3. If you press the buttons, you'll see that the transform value looks like this: translateX(calc(0% + NaN * 1px)).

5. Expected behavior

The transform value should be translateX(0px) or a valid equivalent.

6. Video or screenshots

20250527-0104-53.6953511.mp4

7. Environment details

I've checked with Chrome 136 and Firefox 138 on Windows 11, but it doesn't seem to matter, it seems to be an internal logic issue.