Scrollgesteuerte CSS-Animationen

Das Modul CSS scroll-driven animations bietet Funktionen, die auf dem Modul CSS animations und der Web Animations API aufbauen. Damit können Sie Eigenschaftswerte entlang einer scrollbasierten Zeitleiste animieren statt entlang der standardmäßigen zeitbasierten Dokumentzeitleiste. Ein Element lässt sich also durch Scrollen des Elements, seines Scroll-Containers oder seines Wurzelelements animieren – nicht nur durch das Verstreichen von Zeit.

Scrollgesteuerte Animationen in Aktion

Sie können das Scroll-Element, das die Animation steuert, entweder benennen oder mit den Funktionen scroll() oder view() festlegen.

<main>
  <div></div>
</main>

css

main {
  scroll-timeline: --main-timeline;
}

div {
  animation: background-animation linear;
  animation-timeline: scroll(nearest inline);
}

div::after {
  animation: shape-animation linear;
  animation-timeline: --main-timeline;
}

@layer animations {
  @keyframes background-animation {
    0% {
      background-color: palegoldenrod;
    }
    100% {
      background-color: magenta;
    }
  }
  @keyframes shape-animation {
    0% {
      left: 0;
      top: 0;
      background-color: black;
    }
    50% {
      top: calc(100% - var(--elSize));
      left: calc(50% - var(--elSize));
      background-color: red;
    }
    100% {
      left: calc(100vw - var(--elSize));
      top: 0;
      rotate: 1800deg;
      background-color: white;
    }
  }
}

@layer page-setup {
  :root {
    --elSize: 50px;
  }
  main {
    height: 90vh;
    overflow: scroll;
    border: 1px solid;
    margin: 5vh auto;
  }
  div {
    height: 400vh;
    width: 400vw;
  }
  div::after {
    content: "";
    border: 1px solid red;
    height: var(--elSize);
    width: var(--elSize);
    position: absolute;
    border-radius: 20px;
    corner-shape: superellipse(-4);
  }
}

@layer no-support {
  @supports not (scroll-timeline: --main-timeline) {
    body::before {
      content: "Your browser doesn't support scroll-driven animations.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Scrollen Sie innerhalb des Elements in Inline-Richtung, um zu sehen, wie sich seine Hintergrundfarbe ändert. Scrollen Sie vertikal, um zu sehen, wie sich der generierte Inhalt bewegt, dreht und seine Farben ändert.

Referenz

Eigenschaften

Kurzschreibweise animation-range
- animation-range-end
- animation-range-start
Kurzschreibweise scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
timeline-scope
Kurzschreibweise view-timeline

Zeitleisten für scrollgesteuerte Animationen: Zeitleisten für scrollgesteuerte Animationen und die Erstellung scrollgesteuerter Animationen.
Namen von Zeitleistenbereichen: Der Datentyp <timeline-range-name>: die verschiedenen Namen von Zeitleistenbereichen verstehen.
Einrückungen für View-Progress-Zeitleisten: Die Animationsbereiche scrollgesteuerter Animationen durch Einrückungen anpassen.