Leitfaden für Scroll-driven Animations nur mit CSS

• Scroll-gesteuerte Animationen nur mit CSS lassen sich ohne zusätzliches JS oder Bibliotheken umsetzen
• Mit CSS-Eigenschaften wie animation-timeline: scroll() / view() kann der Animationsfortschritt von der Scroll-Position oder dem Eintritt in den Viewport abhängen
• Mit der Eigenschaft animation-range lässt sich detailliert steuern, in welchem Bereich innerhalb des Viewports eine Animation startet und endet
• Für Nutzer, die empfindlich auf Bewegung reagieren, wird die Verwendung der Media Query prefers-reduced-motion empfohlen
• Unterstützung gibt es ab Safari 26 beta, wodurch sich die Einsatzmöglichkeiten von CSS-basierten Scroll-Animationen deutlich erweitern

---

Die 3 Elemente scroll-basierter Animationen

• Target: Das Zielelement, auf das die Animation angewendet wird, z. B. eine Fortschrittsleiste oder ein Bild
• Keyframes: Definiert, welche Veränderungen beim Scrollen stattfinden sollen (wie bei bestehendem CSS @keyframes)
• Timeline: Legt fest, wann und wie die Animation abläuft (nicht zeitbasiert, sondern scroll- oder viewportbasiert)

Timeline in CSS

• Bestehende CSS-Animationen verwenden standardmäßig die document timeline (zeitbasiert)
• Mit der Einführung der Eigenschaft animation-timeline (CSS Animations Level 2, 2023) kann der Animationsfortschritt neben der Zeit auch von Scrollen oder dem Eintritt in den Viewport abhängen

scroll()-Timeline

• Die scroll()-Timeline lässt die Animation nur dann fortschreiten, wenn der Nutzer scrollt
• Beispiel: Eine Fortschrittsleiste am unteren Rand füllt sich beim Scrollen von links nach rechts

  footer::after {  
    content: "";  
    height: 1em;  
    width: 100%;  
    background: rgba(254, 178, 16, 1);  
    left: 0;  
    bottom: 0;  
    position: fixed;  
    animation: grow-progress linear;  
    animation-timeline: scroll();  
  }  
  @keyframes grow-progress {  
    from { transform: scaleX(0); }  
    to { transform: scaleX(1); }  
  }  
  

• animation-timeline muss nach der Eigenschaft animation definiert werden, damit es korrekt funktioniert

Berücksichtigung von Motion Accessibility

• Zum Schutz von Nutzern mit Bewegungsempfindlichkeit wird die Verwendung der Media Query prefers-reduced-motion empfohlen

  @media not (prefers-reduced-motion) {  
      /* Animationscode */  
  }  
  

view()-Timeline

• Die view()-Timeline startet die Animation, wenn das Zielelement im Viewport erscheint
• Beispiel: Beim Scrollen gleitet ein Bild von rechts herein und blendet gleichzeitig ein

  @keyframes slideIn {  
    0% {  
      transform: translateX(100%);  
      opacity: 0;  
    }  
    100% {  
      transform: translateX(0%);  
      opacity: 1;  
    }  
  }  
  img {  
    animation: slideIn;  
    animation-timeline: view();  
  }  
  

Steuerung des Fortschrittsbereichs mit animation-range

• Standardmäßig reicht animation-range von 0 % (Eintritt in den Viewport) bis 100 % (vollständiges Verlassen)

• Beispiel: Die Animation läuft nur bis zum Bereich von 50 % des Viewports

  img {  
    animation: slideIn;  
    animation-timeline: view();  
    animation-range: 0% 50%;  
  }  
  

• Für eine gute User Experience sollten passende range-Werte gesetzt werden

• Wenn Motion Accessibility berücksichtigt werden soll, zusammen mit prefers-reduced-motion verwenden

  @media not (prefers-reduced-motion) {  
    img {  
      animation: slideIn;  
      animation-timeline: view();  
      animation-range: 0% 50%;  
    }  
  }  
  

Fortgeschrittene Nutzung und nächste Schritte

• scroll() und view() sind Funktionen, für die sich verschiedene Optionen angeben lassen, etwa das Scroller-Element (Standard: nearest) oder die Achse (block, inline, x, y)
• Mit animation-range, entry/exit und Ähnlichem lässt sich eine feinere UX umsetzen
• Zunächst in aktuellen Browsern wie Safari 26 beta unterstützt; Standardisierung und breitere Unterstützung werden sich künftig schrittweise ausweiten

[shakespeare]

Das lässt sich offenbar allein mit animation-timeline umsetzen. Wirklich faszinierend!