Link to the code that reproduces this issue

https://github.com/pixel-toys-chris-evans/css-animation-with-var-interpolation

To Reproduce

1. Start the Application with next dev with --turbo enabled.
2. See the broken and working animation examples.
3. Inspect the element inspector and see the difference in style output.

Current vs. Expected behavior

When turbo isn't enabled, both examples work correctly. When turbo is enabled, the example with a css variable inlined into a shorthand animation property does not animate.

Working:

Broken:

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Wed Feb 21 21:45:49 PST 2024; root:xnu-10063.101.15~2/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.11
  pnpm: 8.10.0
Relevant Packages:
  next: 14.2.0-canary.44 // Latest available version is detected (14.2.0-canary.44).
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack (--turbo)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

_PACK-2879