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

 

In der folgenden Animation werden die Bilder mittels opacity nur eingeblendet und mit folgendem Code versehen:

animation-range: entry;

Industrie

Industrie

Industrie

Industrie

Industrie

Industrie

Industrie

HTML

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

CSS

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

            @keyframes scrollEntry {
            0% {
            opacity: 0
            }

            100% {
            opacity: 1
            }
            }

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

            figure p {
            text-align: center;
            margin: 5em;
            }