[Bug] Animation loses unit in certain circumstances (using spring easing and CSS custom props)

[Acccent]

1. Describe the bug

I am animating an element's x from -50% to 50% by setting a custom property, using a spring easing. This works, until I trigger an animation on the parent, at which point the child's custom prop loses its unit. As soon as I trigger the animation on the child again, it fixes itself.

This might be related to #126 and/or #179 , not sure.

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/animating-offset-of-element-via-custom-props-98myj5?file=/src/index.js

3. Steps to reproduce

1. Open codesandbox provided above
2. Hover over the yellow-pink area
   • A blue box appears (opacity and scale properties animated on the box's parent)
3. Move the cursor into the left and right halves of the area
   • The blue box spring-animates to follow (translate offset property animated on the box itself)
4. Exit the yellow-pink area and re-enter it from the other side
   • The blue box first fades out, then fades back in sliding to its expected position

(So far so good)

5. Exit the yellow-pink area and re-enter it from the same side
   • When the blue box fades back in, its translation property lost the % unit and it now appears in the center (because the custom property is registered with a <percentage> syntax, so when assigned an invalid unitless value it falls back to its default)
   • This is the only situation where properties on the parent were animated, but not on the box itself.

4. Expected behavior

The unit of the animated property remains intact.

5. Browser details

Vivaldi 6.1.3035.302 (Chromium 114.0.5735.321) also tested in Chrome 116.0.5845.111