Closed
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/lgl5ty
To Reproduce
https://codesandbox.io/p/devbox/lgl5ty
- Start the application with NextJS 15.3.x
- Add CSS scroll animation
E.g.
@keyframes parallax {
from {
transform: translateX(var(--transition-from));
}
to {
transform: translateX(var(--transition-to));
}
}
@supports (animation-timeline: view()) {
[data-part="image"] {
animation: parallax linear;
animation-timeline: view();
--transition-from: -50%;
--transition-to: -100%;
}
}
- See, the animation does not work.
bundler generate this code
@supports (animation-timeline: view()) {
[data-part="image"] {
--transition-from: -50%;
--transition-to: -100%;
animation: linear parallax view();
}
}

Current vs. Expected behavior
It works fine with 15.2
https://codesandbox.io/p/devbox/whd6nm
it generates this CSS
@supports (animation-timeline: view()) {
[data-part="image"] {
--transition-from: -50%;
--transition-to: -100%;
animation: auto linear 0s 1 normal none running parallax normal normal;
}
}

Provide environment information
Next.JS 15.3.0
Which area(s) are affected? (Select all that apply)
CSS
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
Additional context
No response