CSS-Animationen, die durch Scrollen ausgelöst werden, sind bald verfügbar.

Bramus

Veröffentlicht: 12. Dezember 2025

2023 haben wir scrollgesteuerte Animationen eingeführt, mit denen Sie eine Animation durch Scrollen vor- oder zurückspulen können. Bei scrollgesteuerten Animationen wird der Fortschritt der Animation beim Scrollen von 0% auf 100% erhöht. Wenn Sie das Scrollen beenden, wird die Animation pausiert. Wenn Sie wieder nach oben scrollen, wird die Animation umgekehrt.

Das nächste Kapitel für scrollbasierte Animationen beginnt 2026 mit der Einführung von scrollbasierten Animationen in Chrome 145. Das sind zeitbasierte Animationen, die ausgelöst werden, wenn ein bestimmter Scroll-Offset überschritten wird.

IntersectionObserver ist für diesen Effekt nicht mehr erforderlich, da er jetzt deklarativ in CSS definiert werden kann.

Zeitachsentrigger, Animationstrigger und Aktionen

Animation auslösen

Um eine scroll-getriggerte Animation in CSS einzurichten, beginnen Sie mit einer regulären CSS-Animation, die an ein Element angehängt ist:

animation: unclip 0.35s ease-in-out both;

Für diese Animation wird DocumentTimeline als Treiber verwendet.Sie dauert 0,35 Sekunden. Die Animation wird nach dem Laden der Seite automatisch ausgelöst. Wenn Sie den Trigger ändern möchten, verwenden Sie die neue CSS-Eigenschaft animation-trigger:

animation-trigger: --t play-forwards play-backwards;

Hier wird die Animation durch den Trigger --t ausgelöst. Wenn dieser Trigger aktiviert wird, wird die Aktion play-forwards für die Animation aufgerufen. Wenn der Trigger deaktiviert wird, wird die Aktion play-backwards aufgerufen.

Die Spezifikation enthält die vollständige Liste der Aktionen.

Trigger erstellen

Aber was ist dieser --t-Trigger? Es handelt sich um einen Trigger mit dem Namen --t. Bei scrollbasierten Animationen ist es ein „Zeitachsentrigger“, der eine Zeitachse für den Scrollfortschritt oder eine Zeitachse für den Ansichtsfortschritt als Quelle verwendet.

Verwenden Sie die Property timeline-trigger (oder die zugehörigen Langformen), um einen Zeitachsentrigger zu definieren. Wenn Sie beispielsweise einen Trigger mit dem Namen --t erstellen möchten, der eine Ansichtszeitachse als Quelle verwendet, verwenden Sie Folgendes:

timeline-trigger-name: --t;
timeline-trigger-source: view();

Der erstellte Trigger --t wird basierend auf der Zeitachse der Ansicht aktiviert und deaktiviert, die dem übereinstimmenden Element zugeordnet ist. Da der Standardbereich für eine Zeitachse für Ansichten der Bereich cover ist, wird der Trigger auch innerhalb oder außerhalb dieses Bereichs aktiviert und deaktiviert.

Bereiche des Triggers anpassen

Wenn Sie die Positionen anpassen möchten, an denen der Trigger aktiv oder inaktiv sein soll, geben Sie die Aktivierungs- und aktiven Bereiche für den Trigger an. Im folgenden Beispiel ist der Aktivierungsbereich auf entry 100% exit 0% festgelegt. Das bedeutet, dass der Trigger aktiviert wird, sobald sich das Motiv in diesem Bereich befindet.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

Da im vorherigen Snippet kein aktiver Bereich angegeben ist, wird der Aktivierungsbereich auch als aktiver Bereich verwendet. Außerhalb dieses aktiven Bereichs wird der Trigger deaktiviert.

In Kombination mit dem bereits definierten animation-trigger wird die Animation visuell vorwärts abgespielt, wenn das Motiv vollständig in den Scrollport eingetreten ist, und rückwärts, wenn es den Scrollport verlässt.

Aufzeichnung einer Demo mit den auf entry 100% exit 0% festgelegten Triggerbereichen.
In der Demo sind auch Debug-Linien zu sehen, die angeben, wo die Bereiche beginnen und enden.

Es ist möglich, unterschiedliche Aktivierungs- und aktive Bereiche zu haben. Beispiel:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

Hier wird der Trigger aktiviert, wenn sich das Motiv im Bereich entry 100% exit 0% befindet. Der Trigger bleibt aktiv, bis er den Bereich entry 0% exit 100% verlässt.

Visuell führt dies dazu, dass die Animation vorwärts abgespielt wird, wenn das Motiv in den Scrollport eintritt. Im Gegensatz zu früher bleibt sie aktiv, bis das Motiv den Scrollport vollständig verlassen hat.

Aufzeichnung einer Demo mit den auf entry 100% exit 0% / entry 0% exit 100% festgelegten Triggerbereichen.
In der Demo sind auch Debugging-Linien zu sehen, die angeben, wo die Bereiche beginnen und enden. Der aktive Bereich umfasst den Scrollport, sodass die Debugging-Zeilen nicht sichtbar sind.

Umfang eines Triggers begrenzen

Trigger sind global sichtbar. Das bedeutet, dass die letzte Übereinstimmung, die einen Trigger mit einem bestimmten Namen deklariert, „gewinnt“. Wenn Sie die Sichtbarkeit eines Triggers einschränken möchten, verwenden Sie das Attribut trigger-scope. Das ist ähnlich wie bei der Verwendung von anchor-scope.

trigger-scope: --t; /* List of dashed idents, or `all` */

Wenn Sie eine CSS-Regel haben, in der ein Trigger deklariert wird, der mit mehreren Elementen übereinstimmt, müssen Sie trigger-scope verwenden.

Demo

In der folgenden Demo wird ein Formular auf verschiedene Abschnitte in voller Höhe aufgeteilt. Wenn ein Teil des Formulars in den Blick kommt, wird es durch eine scroll-getriggerte Animation eingeblendet. Wenn Sie den Scrollport verlassen, wird die Animation ausgeblendet.

Die Logik für die durch Scrollen ausgelöste Animation ist folgende:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

Aufgeschlüsselt bedeutet der Code:

  • Der timeline-trigger heißt --t und seine Quelle ist auf eine Ansicht-Zeitachse festgelegt, die das abgeglichene Element verfolgt.
  • Der Aktivierungsbereich für den Trigger ist contain 15% contain 85%. Wenn sich das Motiv in diesem Bereich befindet, wird der Trigger aktiviert.
  • Wenn der Trigger aktiviert ist, bleibt er so lange aktiv, wie sich das Motiv im aktiven Bereich von entry 100% exit 0% befindet.
  • Die unclip-Animation ist an das Element angehängt.
  • Die Animation ist so eingestellt, dass --t als Triggerquelle verwendet wird. Wenn der Trigger aktiv wird, beginnt die Animation vorwärts abzuspielen.
  • Wenn der Trigger deaktiviert wird, was passiert, wenn das Motiv den aktiven Bereich verlässt, wird die Animation rückwärts abgespielt.
  • Auch die Inhalte der Karte werden mit demselben Trigger --t ein- und ausgeblendet.

Das Beispiel enthält einen Fallback mit IntersectionObserver für Browser, die timeline-trigger nicht unterstützen.

Weitere Demos

Wenn Sie mehr über scroll-getriggerte Animationen erfahren möchten, sehen Sie sich die folgenden Demos an:

Aufzeichnung der Meet the Monsters“-Demo

Feedback

Wir freuen uns über Feedback, damit wir diese Funktion weiter verbessern können. Sie können uns über die sozialen Medien kontaktieren oder ein Problem bei der CSS Working Group melden, um Feedback zu geben.

Wenn Sie auf einen Fehler stoßen, melden Sie ihn in Chromium. Liste bekannter Fehler: Chromium-Fehler-Tracker