Animation mit Fortschritts-Zeitachse

Hier wird nicht die Position einer Scrollleiste eingesetzt, sondern vielmehr die Position eines Elements. Es wird ermittelt, ob ein Element sichtbar ist oder der Bereich, in dem ein Element auf dem Bildschirm zu sehen ist wird für die Animation eingesetzt.

view() statt scroll()

Dazu wird anstatt der scroll() Funktion die view() Funktion eingesetzt.

animation-range

Siehe auch die Animation-range Toolbox

Mittels animation-range und den dazugehörigen Schlüsselwörtern kann man den Eintritt und Ausgang der Animation genauer bestimmen.

animation-range: entry;

Schlüsselwörter sind: entry, contain, cover, exit, entry-crossing, exit-crossing

Im folgendem Beispiel wurde eine Animation zugewiesen, in welcher die Bilder mittels opacity ein-, aus- und wieder eingeblendet werden und mit folgendem Code versehen.

animation-range: cover;

HTML

<figure>
            <p><img...></p>
            <p><img...></p>
            <p><img...></p>
            <p><img...></p>
            </figure>

CSS

            figure img {
            animation-timing-function: linear;
            animation-name: scrollView;
            animation-timing-function: linear;
            animation-timeline: view(block);
            animation-range: cover;
             /*für Firefox*/
            animation-duration: 1ms;
            }



            @keyframes scrollView {
            0% {
            opacity: 0
            }

            50% {
            opacity: 1
            }

            100% {
            opacity: 0
            }
            }

            figure {
            height: 340px;
            overflow: auto;
            }