In diesem Container liegt ein Element mit dem Klassennamen subject, welchem eine keyframes Animation zugewiesen wurde, bei dem die Farbe von grün zu rot wechselt.
Außerhalb der Animation ist background-color: none
Dieses .subject Element soll anhand der Scrollposition animiert werden.
Das geschieht indem man die @keyframes Animation namens moveMe zuweist.
Desweiteren braucht es:
animation-timeline:view();
Mittels animation-range wird ein Schlüsselwort zugewiesen. In diesem Beispiel geht es darum
diese Schlüsselwort auszuprobieren.
Die Box liegt innerhalb der Box mit der Klasse .parent.
In diesem Beispiel geht es darum, auszuprobieren, wie sich die Schlüsselworte für animation-range
auswirken.
Die Schlüsselworte sind:
entryDie Animation startet wenn des Element erscheint und endet, wenn es komplett zu sehen
ist.contain Die Animation startet, wenn das Element komplett zu sehen ist und endet, wenn es
mit der Oberkante an die Oberkante des Elternelements anstösst.coverDie Animation startet wenn das Element zu sehen ist und endet, wenn die Unterkante des
Elements an die Oberkante des Elternelements stösst.exit Die Animation startet wenn die Oberkante des Elemnts an die Oberkante des
Elternelements stösst und endet wenn die Unterkante des Elements an die Oberkante des Elternelements
stösst.entry-crossing kann man einsetzen wenn das Element größer ist als das Elternelementexit-crossing kann man einsetzen wenn das Element größer ist als das ElternelementÄndere im Quelltext den Wert von animation-range.
Klicke in Google Chrome F12 oder Strg Shift i. Wähle unter dem Karteireiter Elemente das .subject Element und ändere unter Stile den animation-range Wert.
Zur Seite mit Javascript Auswahl