Skip to content

animation-range keywords (entry/exit) transformed incorrectly during build #1226

Description

@d-cmaia

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions