5

Быстрый вопрос, - есть страница, на которой картинки должны меняться по таймеру, за счет наслоения на предыдущую. Вот мой код, но там есть только первая анимация.

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#slide {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide {
  100% {
    left: 0;
  }
}

@keyframes slide {
  100% {
    left: 0;
  }
}

#slide2 {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide2 {
  100% {
    left: 0;
  }
}

@keyframes slide2 {
  100% {
    left: 0;
  }
}

#slide3 {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide3 {
  100% {
    left: 0;
  }
}

@keyframes slide3 {
  100% {
    left: 0;
  }
}
<div class="wrapper">
  <img id="slide" src="http://via.placeholder.com/250x250/33ff99/555555?text=Slide_1" />
  <img id="slide2" src="http://via.placeholder.com/250x250/33ff99/555555?text=Slide_2" />
  <img id="slide3" src="http://via.placeholder.com/250x250/33ff99/555555?text=Slide_3" />
</div>

2
  • А картинок будет ровно три или разное кол-во?) Кажется нет способа как-то по умному сделать всю анимацию через counter / calc... и придется задротить код для каждого элемента) P.s. на странице не должно быть больше одного id. Это уникальное "имя" элемента. 20 авг 2019 в 8:16
  • Картинок будет всего три
    – All In
    20 авг 2019 в 8:24

1 ответ 1

11

Правильная ротация получается благодаря z-index. А всё остальное по времени привязывается к одной переменной --time. И оказалось, не так и сложно сделать и для большего количества картинок)

:root {
  --time: 3s; /* Время одного пролистывания */
  --qty: 4; /* Количество картинок */
}

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  box-shadow: 1px 1px 5px 1px #000;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -100%;
  animation: slide calc(var(--time) * var(--qty)) linear infinite;
  z-index: 0;
}

/* кусок задротства - придется редактировать для каждого кол-ва картинок */
.slide:nth-child(2) { animation-delay: var(--time) }
.slide:nth-child(3) { animation-delay: calc(var(--time) * 2) }
.slide:nth-child(4) { animation-delay: calc(var(--time) * 3) }

@keyframes slide {
  0% { z-index: 10; }
  5% { left: 0; }
  66% { left: 0; }
  100% { left: -100%; }
}
<div class="wrapper">
  <img class="slide" src="http://via.placeholder.com/250x250/cc0000/fff?text=bubu" />
  <img class="slide" src="http://via.placeholder.com/250x250/f36700/fff?text=kuku" />
  <img class="slide" src="http://via.placeholder.com/250x250/045acf/fff?text=dudu" />
  <img class="slide" src="http://via.placeholder.com/250x250/004400/fff?text=moo" />
</div>

4
  • Спасибо, это то, что нужно
    – All In
    20 авг 2019 в 9:45
  • мне понравилось текста +1 за креативные тексты :)
    – Randall
    20 авг 2019 в 9:59
  • @ИзбытокСусликов bubu это визитная карточка автобота Если увидишь на просторах интернета безымянный скрипт, с классом .bubu, то однозначно автор его, - автобот трансформер :))) 11 ноя 2019 в 18:21
  • 1
    @Alexandr_TT а я не обращал внимание на имена классах в его ответах .Теперь запомню )
    – Randall
    13 ноя 2019 в 5:50

Ваш ответ

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

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