Was ist los mit meiner Diashow CSS?

Question

Ich mache eine Diashow mit nur HTML und CSS, in denen Bilder in einer Endlosschleife ineinander übergehen.

Allerdings, wenn ich es teste. Das erste Bild wird vollständig weiß und das zweite Bild wird ausgeblendet, anstatt dass das erste Bild ausgeblendet und das zweite Bild gleichzeitig eingeblendet wird.

Um dies zu verdeutlichen, tritt dies erst ab dem zweiten Zyklus auf. Das heißt, der erste Zyklus von fünf Bildern wechselt nahtlos mit simultanen Ein- und Ausblendungen, aber bei jedem weiteren folgenden Zyklus der Diashow gibt es Ausblendungen zwischen den Folien.

Ich möchte diese Übergänge nahtlos machen. Offensichtlich habe ich einen Fehler gemacht, entweder mit meinen Opazitätskontrollen oder dem Keyframe-Timer.

Bitte helfen. Sehr dankbar.

Die CSS:

.css-slideshow { 
    min-width:100%; 
    position: fixed; 
} 

.css-slideshow figure { 
    position: fixed; 
    min-width: 100%; 
    width: 100%; 
    margin: 0 auto; 
} 

figure:nth-child(1) { 
    animation: xfade 24s 24s infinite; 
} 

figure:nth-child(2) { 
    animation: xfade 24s 18s infinite; 
} 

figure:nth-child(3) { 
    animation: xfade 24s 12s infinite; 
} 

figure:nth-child(4) { 
    animation: xfade 24s 6s infinite; 
} 

figure:nth-child(5) { 
    animation: xfade 24s 0s infinite; 
} 

@keyframes xfade { 
    0%{ 
    opacity: 1; 
    } 
    10.5% { 
    opacity: 1; 
    } 
    12.5%{ 
    opacity: 0; 
    } 
    98% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

Die HTML:

<div class="css-slideshow"> 

    <figure> 
     <img src="slider-image1.jpg" width="100%" alt="class-header-css3"/> 
    </figure> 
    <figure> 
     <img src="slider-image2.jpg" width="100%" alt="class-header-semantics"/> 
    </figure> 
    <figure> 
     <img src="slider-image3.jpg" width="100%" alt="class-header-offline"/> 
    </figure> 
    <figure> 
     <img src="slider-image4.jpg" width="100%" alt="class-header-device"/> 
    </figure> 
    <figure> 
     <img src="dfdfdfdfdd.jpg" width="100%" alt="class-header-connectivity"/> 
    </figure> 

    </div> 

Answer 1

.css-slideshow { 
 
    min-width:100%; 
 
    position: fixed; 
 
} 
 

 
.css-slideshow figure { 
 
    position: fixed; 
 
    min-width: 100%; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
figure:nth-child(1) { 
 
    animation: xfade 25s 20s infinite; 
 
} 
 

 
figure:nth-child(2) { 
 
    animation: xfade 25s 15s infinite; 
 
} 
 

 
figure:nth-child(3) { 
 
    animation: xfade 25s 10s infinite; 
 
} 
 

 
figure:nth-child(4) { 
 
    animation: xfade 25s 5s infinite; 
 
} 
 

 
figure:nth-child(5) { 
 
    animation: xfade 25s 0s infinite; 
 
} 
 

 
@keyframes xfade { 
 
    0%{ 
 
    opacity: 1; 
 
    } 
 
    20%{ 
 
    opacity: 0; 
 
    } 
 
    80% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div class="css-slideshow"> 
 

 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-css3"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-semantics"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-offline"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-device"/> 
 
    </figure> 
 
    <figure> 
 
     <img src="https://images.unsplash.com/photo-1465284958051-1353268c077d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-connectivity"/> 
 
    </figure> 
 

 
    </div>

Dies funktioniert. Ein paar Dinge, die mir aufgefallen sind: 1) Sie haben 5 Bilder, verwenden aber eine 24 Sekunden Animation mit 6 Sekunden Verzögerung. 2) 24s und 0s Animationen beginnen gleichzeitig mit dem zweiten Durchgang. 3) Ihre Bilder waren nicht undurchsichtig lang genug, um keine Lücken zwischen den Animationen zu haben