Environment
- Astro 6.1.5
- Vite 7.3.2 / 8.0.8
- Lightning CSS 1.32.0
- Tailwind 4.2.2 Vite plugin
Description
When using animation-range with entry/exit keywords for scroll-driven animations, Lightning CSS incorrectly collapses the values. Specifically, exit 100% (or the implicit 100% in the keyword exit) is being transformed into exit 0%. Since exit 0% is the start of the exit phase, it causes animations to "finish" early or snap to their end state immediately.
Source CSS:
animation-timeline: view();
animation-range: entry exit;
Output after build:
animation-timeline: view();
animation-range: entry exit 0%; /* <--- oh no */
Playground link. In my local project, the following also corrupt but I couldn't reproduce it in the playground:
animation-timeline: view();
animation-range: entry 0% exit 100%;
animation-timeline: view();
animation-range-start: entry 0%;
animation-range-end: exit 100%;
Workaround
Using plain percentages instead of keywords passes through correctly: animation-range: 0% 100%;
Expected behavior
Should preserve the semantic meaning of the range:
entry exit is shorthand for entry 0% exit 100%.
- If minified to percentages, it should be
0% 100%.
Related to #1012 since both involve newish animation properties.
MDN reference
Spec reference
Environment
Description
When using
animation-rangewith entry/exit keywords for scroll-driven animations, Lightning CSS incorrectly collapses the values. Specifically, exit100%(or the implicit100%in the keyword exit) is being transformed intoexit 0%. Sinceexit 0%is the start of the exit phase, it causes animations to "finish" early or snap to their end state immediately.Source CSS:
Output after build:
Playground link. In my local project, the following also corrupt but I couldn't reproduce it in the playground:
Workaround
Using plain percentages instead of keywords passes through correctly:
animation-range: 0% 100%;Expected behavior
Should preserve the semantic meaning of the range:
entry exitis shorthand forentry 0% exit 100%.0% 100%.Related to #1012 since both involve newish animation properties.
MDN reference
Spec reference