Как правильно установить скорость анимации CSS, включая z-index - PullRequest
Новая
       18

Как правильно установить скорость анимации CSS, включая z-index

0 голосов
/ 17 мая 2019

Необходимо изменить скорость анимации для слайд-шоу, в котором используются анимации ключевых кадров CSS и z-index.Пример кода

Попробовал очевидное изменение, установив атрибут времени по-другому, но результаты ему не понравились.Много изучал подобные ситуации и просматривал документацию по ключевым кадрам CSS. 

.picone,
.pictwo,
.picthree,
.picfour,
.picfive,
.picsix {
  height: 800px;
  width: 100%;
  position: absolute;
  background-size: cover;
  z-index: 1;
}


/*KEYFRAME ANIMATIONS */

@keyframes picone {
  0% {
    z-index: -1;
  }
  20% {
    z-index: -6;
  }
  40% {
    z-index: -5;
  }
  60% {
    z-index: -4;
  }
  80% {
    z-index: -3;
  }
  100% {
    z-index: -2;
  }
}

.picone {
  animation: picone 10s linear infinite;
}

@keyframes pictwo {
  0% {
    z-index: -2;
  }
  20% {
    z-index: -1;
  }
  40% {
    z-index: -6;
  }
  60% {
    z-index: -5;
  }
  80% {
    z-index: -4;
  }
  100% {
    z-index: -3;
  }
}

.pictwo {
  animation: pictwo 10s linear infinite;
}
<!-- homepage hero loop -->
<div class="picone"><img src="https://www.website.org/wp-content/uploads/2019/03/pic1[dot]jpg">
</div>
<div class="pictwo"><img src="https://www.website.org/wp-content/uploads/2019/03/pic2[dot]jpg">
</div>

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

...