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:

• 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.
• entryDie Animation startet wenn des Element erscheint und endet, wenn es komplett zu sehen ist.
• entry-crossing Wenn das Element höher ist als das Elternelement endet die Animation wenn die Unterkante des Elements an die Unterkante des Elternelements stösst. Bei entry endet die Animation, wenn die Oberkante des Elements die Oberkante des Elternelements erreicht.
• 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.
• exit-crossing Wenn das Element höher ist als das Elternelement startet die Animation, wenn die Oberkante des Elements die Oberkante des Elternelements erreicht. Bei exit startet die Animation, wenn die Unterkante des Elements die Unterkante des Elternelements erreicht hat.

Mittels Javascript wird lediglich den Wert der CSS Eigenschaft animation-range. Es wird der Wert zugewiesen, welchen man durch einen der Radiobuttons ausgewählt hat.

Die beiden Schlüsselworte entry-crossing und exit-crossing zeigen bei einer Höhe von 100 Pixeln keinen Unterschied zu entry und exit Er wird erst dann sichtbar, wenn das .subject-Element höher ist, als dessen Elternelement, mit der Scrollleiste. Wähle dazu den Radiobutton "500 Pixel Höhe".

            .parent {
            max-width: 400px;
            margin: auto;
            overflow-y: scroll;
            overflow-x: hidden;
            height: 200px;
            border: 1px solid black;
            position: relative;

            }

            #subject {
            border: 1px solid red;
            height: 100px;
            width: 400px;
            background-color: none;
            animation-name: moveMe;
            animation-timeline: view();
            animation-range: entry;
            }

            @keyframes moveMe {
            from {
            background-color: green;
            }

            to {
            background-color: red;
            }
            }