Анимация ключевого кадра исчезает между 3 изображениями не работает - PullRequest
Новая
       16

Анимация ключевого кадра исчезает между 3 изображениями не работает

0 голосов
/ 01 апреля 2019

Я пытаюсь получить 3 изображения, которые я сложил поверх друг друга, чтобы переключиться с одного на другое, на следующее, а затем выполнить цикл с использованием анимации ключевых кадров CSS.

Ниже мой код и скрипка 

 <div class="kiara-img">
   <img class="kiki-one" src="https://kiaramelissa.com/virtual/Kiki-1.png">
   <img class="kiki-two" src="https://kiaramelissa.com/virtual/Kiki-2.png">
   <img class="kiki-three"  src="https://kiaramelissa.com/virtual/Kiki-3.png">
 </div>

@keyframes fade {
  0% {
   z-index:1;
  }


  100% {
   z-index:5;
  }

  0% {
    z-index:1;
  }
}
@keyframes fade2 {
  0% {
   z-index:2;
  }


  100% {
   z-index:5;
  }
    0% {
    z-index:2;
  }
}
@keyframes fade3 {
  0% {
   z-index:3;
  }

  100% {
   z-index:5;
  }
    0% {
    z-index:3;
  }
}


.kiara-img img:nth-of-type(1) {
  position:absolute;
    animation-name: fade;
    animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 9s;
}

.kiara-img img:nth-of-type(2) {
    position:absolute;
      animation-name: fade2;
      animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 6s;
}

.kiara-img img:nth-of-type(3) {
    position:absolute;
   animation-name: fade3;
   animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}

.kiara-img {
  position:relative;
}

https://jsfiddle.net/ft6wcLy5/

РЕДАКТИРОВАТЬ Первоначально я использовал непрозрачность, но он прыгал и пропускает одно изображение полностью, затем полностью начинает ломаться и странно мигает.

Поэтому я выбрал z-index. Не уверен, что это вызовет какие-либо проблемы? Использует ли z-index то, что я хочу, хорошо?

Я не могу понять, что именно я делаю здесь неправильно ... Любая помощь будет признательна!

...