CSS3 анимация слайд-шоу

Question

Получил небольшое слайд-шоу img с анимацией/ключевыми кадрами, у него есть 4 изображения, работающие по 6 секунд каждый в бесконечном цикле 24s, Проблема в том, что когда он проходит один раз, переход в порядке, прошли через 4 изображения и повторы, есть хорошие 2-3 секунды после того, как изображение исчезает, а следующее исчезает.

Первый раз, используя анимацию и ключевые кадры, поэтому я не на 100%, что я сделал неправильно. Слайд-шоу работает в DIV называется .slideshow Я вынимаю большинство префиксов пространства и читаемость:

/* CSS */ 


.slideshow figure:nth-child(4) { 
-webkit-animation: xfade 24s 0s infinite; 
animation: xfade 24s 0s infinite; 
} 
.slideshow figure:nth-child(3) { 
-webkit-animation: xfade 24s 6s infinite; 
animation: xfade 24s 6s infinite; 
} 
.slideshow figure:nth-child(2) { 
-webkit-animation: xfade 24s 12s infinite; 
animation: xfade 24s 12s infinite; 
} 
.slideshow figure:nth-child(1) { 
-webkit-animation: xfade 24s 18s infinite; 
animation: xfade 24s 18s infinite; 
} 

@keyframes "xfade" { 
0% { 
    opacity: 1; 
} 
14% { 
opacity: 1; 
} 
16% { 
    opacity: 0; 
} 
90% { 
    opacity: 0; 
} 
100% { 
    opacity: 1; 
} 
} 

не в двух экземплярах, имеющие проблемы с одной слайдом-шоу изображений, что петли отлично подходит для первого 24s , то главным 2-3 зазор между изображениями каждый раз после того, как ..

Answer 1

Попробуйте изменить xfade анимацию

@keyframes "xfade" { 
    0% { 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    26% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

Логически, так как изображения 4 цикл должен быть 25%,