Scroll-triggered

Ausblick

…

Feuert eine zeitbasierte Animation, sobald ein Bereich betreten wird — kein IntersectionObserver, keine Scrubbing-Kopplung. Aktuell nur Chrome 145+.

Dein Browser unterstützt animation-trigger noch nicht. Das Feature ist experimentell und läuft aktuell nur in Chrome 145+. Die Boxen unten zeigen den Endzustand statisch — beim Scrollen passiert bewusst nichts.

Feuert bei entry

Und wieder zurück

Beim Wieder-Runterscrollen

Kein IntersectionObserver

.subject{ timeline-trigger: --t view() contain / cover; }
.box{
  animation: pop .35s ease both;
  animation-trigger: --t play-forwards play-backwards;
}
@keyframes pop{
  from{ opacity:0; transform: translateY(24px) scale(.7) }
  to  { opacity:1; transform: none }
}

Syntax noch experimentell: contain / cover ist die Kurzform für Aktivierungs- und Aktiv-Range. trigger-scope: --t falls mehrere Elemente denselben Trigger-Namen matchen.