Css `animation-timeline` is experimental and thus not yet supported by all browsers

[sopheck]

I have declared the following css animation for the navigation bar:

#nav-top {
  animation: stickyNav linear forwards;
  animation-timeline: view();
  animation-range: cover 100vh 120vh; 
}

@keyframes stickyNav {
  0% {
    background-color: transparent;
    box-shadow: none;
  }

This causes the navigation bar to be highlighted in colour when scrolling in order to keep its content legible while scrolling. However, this behaviour is currently only supported by browsers with a Chromium engine (Chrome, Edge) and not by Firefox and Safari, as animation-timeline is still experimental: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline

To avoid unwanted behaviour in these browsers, navbar is set to fixed-top and not to sticky-top. This may be changed in the future as soon as animation-timeline is supported by all current browsers.

(1) ✅ Fixed-top navar in Firefox with animation-timeline.

(2) ✅ Fixed-top navbar in Chrome with animation-timeline.

(3) ❌ Sticky-top navbar in Firefox with animation-timeline (Unwanted behaviour: Navbar is highlighted without scroll, because animation-timeline does not (yet) work).

(4) ✅ Sticky-top navbar in Chrome with animation-timeline.