CSS/Eigenschaften/animation-timeline

Aus SELFHTML-Wiki
CSS‎ | Eigenschaften (Weitergeleitet von Animation-timeline)
Wechseln zu: Navigation, Suche

Die Eigenschaft animation-timeline legt die Zeitleiste fest, die zur Steuerung des Fortschritts einer CSS-Animation verwendet wird.

Erlaubte Werte
  • none:
  • auto:
  • scroll()
  • view()
  • <dashed-ident>: Identifizieren einer benannten Zeitleiste, die zuvor mit der scroll-timeline oder view-timeline deklariert wurde.
Vererbung steuernde Werte inherit, initial, unset und revert
Standardwert

auto

anwendbar auf

alle Elemente, Pseudoelemente ::before und ::after

Vererbung

nein

animierbar

nein

Beispiel 
#container {
 height: 300px;
 overflow-y: scroll;
 scroll-timeline-name: --square-timeline;
 position: relative;
}
#square {
 background-color: deeppink;
 width: 100px;
 height: 100px;
 margin-top: 100px;
 animation-name: rotateAnimation;
 animation-duration: 1ms; /* Firefox requires this to apply the animation */
 animation-direction: alternate;
 animation-timeline: --square-timeline;
 position: absolute;
 bottom: 0;
}
@keyframes rotateAnimation {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 }
}
 

Siehe auch

  • mehrstufige Animationen

    komplexe Abfolgen und Bewegungsmuster

    • keyframes (Wegpunkte für die Animation)
    • Dauer und Wiederholungen
  • Bilder präsentieren
    Lazy Loading und Image Reveal

Weblinks

Abgerufen am 8.01.2026
von "http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/animation-timeline"