Как сделать анимацию для трех изображений.

[kikorik]

Нашла код для анимации изображений, но в примере используются два изображения. Никак не получается добавить третье изображение:

<div id="cf3" class="shadow">
  <img class="bottom" src="/images/slider1.png">
  <img class="top2" src="http:/images/slider2.png">
</div>

@keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf3 {
  position: relative;
  margin: 0 auto;
}
#cf3 img {
  position: absolute;
  left: 0;
}
#cf3 img.top {
  -webkit-animation-name: cf3FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;
  -webkit-animation-direction: alternate;
  -moz-animation-name: cf3FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 10s;
  -moz-animation-direction: alternate;
  -o-animation-name: cf3FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 10s;
  -o-animation-direction: alternate;
  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}

Взято отсюда Для просмотра ссылки Войди или Зарегистрируйся На странице приведен алгоритм расчета процентов, но что-то не получается...

 

[HeadHunter]

а ниже пролистать? там демо есть
Demo with multiple images

 

[kikorik]

Смотрела, но там четыре изображения. А мне надо сделать только на 3. Переделать вариант Demo with multiple images тоже не получается

 

[SieOK]

Смотрела, но там четыре изображения. А мне надо сделать только на 3. Переделать вариант Demo with multiple images тоже не получается

Ну так в чем проблема. Берешь пример Демо3, убираешь 4-ю картинку т е этот блок

#cf4a img:nth-of-type(4) {
animation-delay: 0;
}

В оставшихся 3-х меняешь animation-delay: на 6, 3, 0