Что случилось с моим слайд-шоу css?

Question

Я делаю слайд-шоу, используя только html и css, в которых изображения исчезают друг с другом в бесконечном цикле.

Однако, когда я проверяю его. Первое изображение полностью исчезает до белого, а затем второе изображение исчезает, а не первое затухание изображения и второе изображение одновременно.

Чтобы уточнить это, это происходит только во втором цикле. То есть первый цикл из пяти изображений делает переход легко, с одновременным затуханием и затуханием, но каждый последующий цикл слайд-шоу имеет переходы между слайдами.

Я хотел бы сделать эти переходы без проблем. Очевидно, что я допустил ошибку либо с помощью элементов управления непрозрачностью, либо таймера ключевых кадров.

Пожалуйста, помогите. Очень благодарен.

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; 
    } 
} 

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>

Это будет работать. Несколько вещей, которые я заметил: 1) у вас есть 5 изображений, но они использовали 24-секундную анимацию с 6-секундными задержками. 2) Анимации 24s и 0s начнутся в то же время, начиная со второго прохода. 3) ваши фотографии не были достаточно непрозрачными, чтобы не иметь промежутков между задержками анимации