Реализуйте js в css анимации, чтобы получить анимацию слайд-шоу, определяющую c задержку - PullRequest
Новая
       6

Реализуйте js в css анимации, чтобы получить анимацию слайд-шоу, определяющую c задержку

0 голосов
/ 03 февраля 2020

Я нашел эту маленькую css затухающую анимацию слайд-шоу, и она мне действительно нравится, но единственная проблема, которая меня беспокоит, это то, что картинки меняются очень быстро ..

HTML

<div class="wpb_wrapper">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>

CSS

.wpb_wrapper > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
min-height: 100vh;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.wpb_wrapper > figure:nth-child(1) { background-image: url('http://bfm.rs/wp-content/uploads/2019/02/bg-1.jpeg'); }

.wpb_wrapper > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('http://bfm.rs/wp-content/uploads/2019/03/bg-5.jpg');
}

.wpb_wrapper > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('http://bfm.rs/wp-content/uploads/2019/03/bg-4.jpg');
}

.wpb_wrapper > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('http://bfm.rs/wp-content/uploads/2019/05/main-bg.jpg');
}

.wpb_wrapper > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('http://bfm.rs/wp-content/uploads/2019/05/popup-bg.jpeg');
}
@keyframes 
imageAnimation {  0% {
  animation-timing-function: ease-in;
  opacity: 0;
}
8% {
  animation-timing-function: ease-out;
  opacity: 1;
}
17% {
  opacity: 1;
}
25% {
  opacity: 0;
}
100% {
  opacity: 0;
}
}

То, что я хотел бы сделать, это установить определенное время c, например, 1 мин или 1 час между каждым изображением, поэтому для каждого изменения требуется, например, 1 час. Может быть, когда реализовано в js или как-то через css Я не уверен.

...