Merges animation-timeline for scroll driven animations into invalid shorthand

Author: eighty4Created Sep 8, 2026Updated Sep 8, 2026

When using animation: shorthand without a duration for scroll driven animations, it is incorrect to merge animation-timeline: into the animation: shorthand property.

Lightningcss currently does, creating an invalid CSS:

css
    /* bad */
    animation: ease-in-out both cloud-pan scroll(root y);

Whereas the correct output would be:

css
    /* good */
    animation: ease-in-out both cloud-pan;
    animation-timeline: scroll(root y);

Found first with Astro: withastro/astro#17940

Source: parcel-bundler/lightningcss