CSS animation timeline reminder

In 2026, you can start putting CSS scroll timeline animation into work progressively. It’s handy and it doesn’t require JavaScript. All pure CSS.

However there is one tiny gotcha with build tool like Vite.

I’m on Astro 7 with vite and my CSS is:

animation: photoIn linear both;
animation-timeline: --photo;

After build, it will become something like this:

animation: linear both photoIn --photo;

The trailing –photo will make this animation syntax wrong and ignored by the browser. Hence losing the scroll animation. The workaround is to NOT to use CSS shorthand for the animation.

The interim solution to prevent the wrong shorthand in minified CSS is spelling out individual animation properties:

animation-name: photoOut;
animation-timing-function: linear;
animation-fill-mode: both;

The error is coming from cssMinifiy (lightning CSS minification) from the Vite’s build process. Until then, this is the way to enable scroll animation today.