CSS-Slideshow überlappt Bilder

Question

Hi,

Ich habe eine Slideshow gebastelt. Dabei wird das erste Bild ordnungsgemäß abgespielt. Aber bereits nach 11s überlappt das zweite Bild das Erste, was natürlich sichtbar ist und unschön aussieht. Ebenso verhält es sich mit dem dritten Bild,

Dies ist mein Code:

...       

            div.slideshow {

                position: relative;

                width: 100vw;

                height: 50vh;

                border: 1px solid #000;

            }

            .animate {

                position: absolute;

                left: 100%;

                width: 25vw;

                animation: animate 11s ease-out infinite;

                }

            @keyframes animate {

                0% {

                    left: 100%; /*Ganz rechts*/

                    opacity: 0;

                    visibility: hidden;

                }

                /*Stoppe die Animation*/

                27.3%, 80% {

                    left: 35%;

                    opacity: 1;

                    visibility: visible;

                }

                /**/

                100% {

                    left: 0;

                    opacity: 0;

                    visibility: hidden;

                }

            }

            div.slideshow img:nth-child(1) {

                animation-delay: 0s;

            }

            div.slideshow img:nth-child(2) {

                animation-delay: 11s;

            }

            div.slideshow img:nth-child(3) {

                animation-delay: 22s;

            }

...

        <div class="slideshow">

            <img class="animate" loading="lazy" src="C:\Users\xxx\Pictures\xxx">

            <img class="animate" loading="lazy" src="C:\Users\xxx\Pictures\xxx">

            <img class="animate" loading="lazy" src="C:\Users\xxx\Pictures\xxx">

        </div>

Vielleicht kann mir hier jemand helfen?

LG und einen schönen Sonntag.

Answer 1

Hallo AllesMussNixKann,

ganz verstehe ich deine Animation nicht. Das neue Bild wird von rechts hineingeschoben, beginnend mit voller Transparenz, wird in der Mitte allmählich undurchsichtig und zum Ende hin wieder transparent. Außerdem wird das neue Bild nur in der mittleren Phase überhaupt sichtbar. Das beedeutet für mich, dass die Animation mit einem voll transparenten und nicht sichtbaren Bild endet. Habe ich das richtig verstanden?

Gruß computerschrat

Answer 2

Hi Computerschrat,

genau so hast du es richtig verstanden: Das Bild faded von rechts ein und wird bis zur Mitte immer intransparenter. Verweilt dort für ca. 10 Sekunden und faded nach links wieder aus, indem es immer transparenter wird.

Das Problem ist dabei, dass dabei ALLE 3 Bilder sich überlappen. Bild 1 faded ein, bleibt stehen und faded wieder aus. Soweit ok. Nach 11 Sekunden sieht man allerdings schon, dass Bild 2 über Bild 1 liegt und synchron zu Bild 1 einfaded, stehenbleibt und ausfaded. Gleiches Spiel mit Bild 3, welches sich über die anderen beiden Bilder legt.

Ich überlege, ob man im CSS sagen kann, dass, solange eines der drei Bilder in der Animation ist, die anderen beiden Bilder ausgeblendet werden.

Answer 3

Hallo,
dann vergrößere zeitlich den Abstand der Bilder zu einander, so dass das vorhergehende Bild ausgeblendet ist, bevor das nachfolgende eingeblendet wird.
Wenn das nicht funktioniert, dann füge zwischen jeden Bild ein Pause von 1 sec. ein.
MfG Kody

Answer 4

Hallo,

falls es dir ausreicht, dass deine Slideshow nur einmalig durchläuft, könnte das die Lösung sein: Ergänze deinen Code um

div.slideshow img {animation-iteration-count: 1;}

Gruß Mr. K.

Answer 5

Falls du eine Dauerslideshow willst, musst du deine Keyframes abhängig von der Anzahl der Bilder anpassen.  Bei drei Bildern wäre der Code dann wie folgt:

<style>

.      
            div.slideshow {
                position: relative;
                width: 100vw;
                height: 50vh;
                border: 1px solid #000;
            }

            .animate {
                position: absolute;
                left: 100%;
                width: 25vw;
                animation: animate 33s ease-out infinite;
                }

            @keyframes animate {
                0% {
                    left: 100%; /*Ganz rechts*/
                    opacity: 0;
                    visibility: hidden;
                }

                /*Stoppe die Animation*/

                11%, 22% {
                    left: 35%;
                    opacity: 1;
                    visibility: visible;
                }

                /**/

                33% {
                    left: 0;
                    opacity: 0;
                    visibility: hidden;
                }

             100% {
                    left: 0;
                    opacity: 0;
                    visibility: hidden;
                }

            }

           div.slideshow img:nth-child(1) {
                animation-delay: 0s;
            }

            div.slideshow img:nth-child(2) {
                animation-delay: 11s;
            }
            div.slideshow img:nth-child(3) {
                animation-delay: 22s;
            }

...

</style>

<body>

        <div class="slideshow">

            <img class="animate" loading="lazy" src="C:\Users\xxx\Pictures\xxx">

            <img class="animate" loading="lazy" src="C:\Users\xxx\Pictures\xxx">

            <img class="animate" loading="lazy" src="C:\Users\xxx\Pictures\xxx">

        </div>

</body>

Gruß Mr. K.

Answer 6

Falls du eine Dauerslideshow willst, musst du deine Keyframes abhängig von der Anzahl der Bilder anpassen.  Bei drei Bildern wäre der Code dann wie folgt:

Perfekt. Genau diese Lösung habe ich gesucht. Vielen Dank.

LG und eine schöne Woche.