animation-timeline: view(); not working in Astro

[preetamslot]

I have this css (inline)

 .content-grid > div {
    animation: up linear both;
    animation-timeline: view();
    animation-range: 0vh 20vh;
  }
  .fade-up {
    animation: up linear both;
    animation-timeline: view();
    animation-range: 0px 200px;
  }

It looks like css animations are not triggered (Firefox), only JS animations are working for me.

If someone has a tip, let me know!

https://uinc.netlify.app/ (Project)

[ADTC]

@preetamslot don't wrap in @media screen and (prefers-reduced-motion: no-preference). Use a reset for reduce instead.

See #296.

PS: Also this has nothing to do with Astro since that's (mostly) a static site generator. The browser only sees HTML, CSS and JS.