Animation mit Fortschritts-Zeitachse

Hier werden die Bilder mittels clip-path eingeblendet.

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


            @keyframes scrollView {
            0% {
            clip-path: rect(50% 0px 0px 50%);
            opacity: 0.1;
            }


            100% {
            opacity: 1;
            clip-path: rect(0 300px 300px 0px);
            }
            }


            figure {
            height: 340px;
            overflow: auto;
            padding: 0;
            margin: auto;
            width: min-content;
            }