0

Уважаемые знатоки, не могу разобраться как происходит смена картинок( по какому принципу) и почему первый круг анимации проходит нормально, а со второго круга, первая картинка показывается не полностью, и не успев исчезнуть быстро появляется вторая. Я нашел статью откуда взял пример такого слайдера, но из описания не смог, и с трудом понимаю по какому принципу высчитываются проценты Opacity для затухания картинки(или анимации).

header {
  position: relative;
}

.bg {
  width: 256px;
  height: 256px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  animation-name: anim;
  animation-delay: 0;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bg:nth-child(1) {
  background-image: url(https://i.stack.imgur.com/MmC2r.png);
}

.bg:nth-child(2) {
  background-image: url(https://i.stack.imgur.com/EwE2F.png);
  animation-delay: 4s;
  -webkit-animation-delay: 4.0s;
}

.bg:nth-child(3) {
  background-image: url(https://i.stack.imgur.com/CzoAj.png);
  animation-delay: 4s;
  -webkit-animation-delay: 4.0s;
}

@keyframes anim {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<header>
  <div class="bg ">Yellow</div>
  <div class="bg ">Turquoise</div>
  <div class="bg ">Black</div>
</header>

1 ответ 1

1

Когда я подредактировал ваш вопрос и обеспечил рабочий фрагмент, проблема натурально проявилась сама-собой.

Дело в Copy/Paste опечатке. Для третьей картинки задержка должна быть 8s, а не 4s:

  animation-delay: 8s;
  -webkit-animation-delay: 8.0s;

header {
  position: relative;
}

.bg {
  width: 256px;
  height: 256px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  animation-name: anim;
  animation-delay: 0;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bg:nth-child(1) {
  background-image: url(https://i.stack.imgur.com/MmC2r.png);
}

.bg:nth-child(2) {
  background-image: url(https://i.stack.imgur.com/EwE2F.png);
  animation-delay: 4s;
  -webkit-animation-delay: 4.0s;
}

.bg:nth-child(3) {
  background-image: url(https://i.stack.imgur.com/CzoAj.png);
  animation-delay: 8s;
  -webkit-animation-delay: 8.0s;
}

@keyframes anim {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<header>
  <div class="bg ">Yellow</div>
  <div class="bg ">Turquoise</div>
  <div class="bg ">Black</div>
</header>

1
  • спасибо, мне аж стыдно за такое) я думал проблема посерьезней будет 8 мая 2019 в 16:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.