CSS/Eigenschaften/animation-range

Browserunterstützung
caniuse.com

Die Eigenschaft animation-range Shorthand-Eigenschaft wird verwendet, um den Anfang und das Ende des Anwendungsbereichs einer Animation entlang ihrer Zeitachse festzulegen, d. h. wo entlang der Zeitachse eine Animation beginnt und endet.

Erlaubte Werte

normal

• • Längenangabe
  • Prozentangabe
• Schlüsselwort
  • cover
  • contain
  • entry
  • exit
  • entry-crossing
  • exit-crossing

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

alle Elemente, Pseudoelemente ::before und ::after

Vererbung

nein

animierbar

nein

Beispiel

#subject {
  animation: anim linear both;
  animation-timeline: view();
  animation-range: entry calc(100% - 100px) exit calc(0% + 100px);
}

Die .

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

• CSSWG: animation-range
• MDN: animation-range
• Details: caniuse.com