Изменение фоновых изображений с помощью css3

Question

Я пытаюсь автоматически сменить фоновое изображение с помощью css3. У меня есть 9 изображений для изменения в фоновом режиме. Проблема я столкнулся есть, он показывает только первый и последний образ в скользящем, но не 2, 3, 4, 5, 6, 7, 8. У меня следующий код:

<img id="img1" src="images/1.gif"> 
<img id="img2" src="images/2.gif"> 
<img id="img3" src="images/3.gif"> 
<img id="img4" src="images/4.gif"> 

<img id="img5" src="images/5.gif"> 
<img id="img6" src="images/6.gif"> 
<img id="img7" src="images/7.gif"> 
<img id="img8" src="images/8.gif"> 

<img id="img9" src="images/9.gif"> 

и вот CSS :

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9 { 
    width:610px; 
    height:610px; 
    position:scroll; 
    z-index:-1; 
    animation-name: test; 
    animation-duration: 90s; 
    opacity:0; 
} 
#img2 { 
animation-delay:10s; 
-webkit-animation-delay:10s 
} 
#img3 { 
    animation-delay:20s; 
    -webkit-animation-delay:20s 
} 
#img4 { 
    animation-delay:30s; 
    -webkit-animation-delay:30s 
} 

#img5 { 
    animation-delay:40s; 
    -webkit-animation-delay:40s 
} 
#img6 { 
    animation-delay:50s; 
    -webkit-animation-delay:50s 
} 
#img7 { 
    animation-delay:60s; 
    -webkit-animation-delay:60s 
} 

#img8 { 
    animation-delay:70s; 
    -webkit-animation-delay:70s 
} 
#img9 { 
    animation-delay:80s; 
    -webkit-animation-delay:80s 
} 

@-webkit-keyframes test { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@keyframes test { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

время задержки для каждого слайда от 1 до 8, за исключением 10s image9, которая имеет время задержки 8.60s.

Пожалуйста, помогите, где я иду не так. :(

Answer 1

Хорошо я сделал JS скрипку, и я думаю, что я придумал, что вы хотите

http://jsfiddle.net/d48vdxmv/2/

В принципе, вам нужно обернуть свои изображения в контейнере первым:.

<div id="container"> 
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg"> 
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg"> 
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_03.jpg"> 
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_04.jpg"> 
</div> 

Тогда в CSS, установите контейнер быть относительное положение, и образы, чтобы быть абсолютным, так они складывают наверх друг от друга.

#container { 
    position:relative; 
    height:610px; 
    width:610px; 
} 
#container img { 
    position:absolute; 
    left:0; 
} 

Затем добавить свои ключевые кадры, с различными вариациями браузера

@-webkit-keyframes imgFade { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@-moz-keyframes imgFade { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@-o-keyframes imgFade { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@keyframes imgFade { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

Тогда вашей анимации детали для всех браузеров

#container img { 
    -webkit-animation-name: imgFade; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 

    -moz-animation-name: imgFade; 
    -moz-animation-timing-function: ease-in-out; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-duration: 8s; 

    -o-animation-name: imgFade; 
    -o-animation-timing-function: ease-in-out; 
    -o-animation-iteration-count: infinite; 
    -o-animation-duration: 8s; 

    animation-name: imgFade; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
} 

И, наконец, ваше время продолжительности для каждого изображения

#container img:nth-of-type(1) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    animation-delay: 6s; 
} 
#container img:nth-of-type(2) { 
    -webkit-animation-delay: 4s; 
    -moz-animation-delay: 4s; 
    -o-animation-delay: 4s; 
    animation-delay: 4s; 
} 
#container img:nth-of-type(3) { 
    -webkit-animation-delay: 2s; 
    -moz-animation-delay: 2s; 
    -o-animation-delay: 2s; 
    animation-delay: 2s; 
} 
#container img:nth-of-type(4) { 
    -webkit-animation-delay: 0; 
    -moz-animation-delay: 0; 
    -o-animation-delay: 0; 
    animation-delay: 0; 
}