CSS-Scroll-gesteuerte Animationen

Das Modul CSS-Scroll-gesteuerte Animationen erweitert das Modul für CSS-Animationen und die Web Animations API. Damit können Sie Eigenschaftswerte entlang einer scrollbasierten Timeline animieren, statt die standardmäßige zeitbasierte Dokument-Timeline zu verwenden. So können Sie ein Element animieren, indem Sie das Element selbst, seinen Scroll-Container oder sein Wurzelelement scrollen – und nicht nur durch das Verstreichen von Zeit.

Scroll-gesteuerte Animationen in Aktion

Sie können den Scroller, der die Animation steuert, entweder über den Namen der Animation oder mit den Funktionen scroll() und 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 das Element 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

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

Timelines für scroll-gesteuerte Animationen: Timelines für scroll-gesteuerte Animationen und das Erstellen scroll-gesteuerter Animationen.
Namen von Timeline-Bereichen: Der Datentyp <timeline-range-name>: die verschiedenen Namen von Timeline-Bereichen verstehen.
CSS-Animationen verwenden, die durch Scrollen ausgelöst werden: Animationen erstellen, die durch Scrollen ausgelöst werden.
Fortschritts-Timelines für Ansichten mit Insets versehen: Die Bereiche anpassen, in denen scroll-gesteuerte Animationen an ihre Timeline gebunden sind.