Как сделать бесконечный цикл переворачивания картинок?

Question

[Вадим Свердлик]

Мне необходимо сделать так ,чтобы в ряде,в которых выводятся категории,переворачивались картинки,чтобы переворачивались через определенное время бесконечно


я понимаю,что нужно через settimout, но механизм работает так,что переворачивает картинку свойство CSS -webkit-transform: rotateY(180deg);
я добавляю класс при переворачивании,сложность в том,что после первого прохождения ряда,класс уже добавлен,и на второй круг оно уже не идет и как сделать бесконечный интервал?

for (var i = 0; i < 100; i++) {
        setTimeout(function() {
            $('.category-block:nth-child(1)').addClass('hover');
        }, 10000);
        setTimeout(function() {
            $('.category-block:nth-child(2)').addClass('hover');
        }, 20000);
        setTimeout(function() {
            $('.category-block:nth-child(3)').addClass('hover');
        }, 30000);
        setTimeout(function() {
            $('.category-block:nth-child(4)').addClass('hover');
        }, 40000);
    }

Comments

[Vadim Bogomazov]

css animations animation-iteration-count в infinite.

Answer 1

[0xD34F]

<div id="images">
  <img src="https://placehold.co/200x200/FF0000/FFFFFF/png">
  <img src="https://placehold.co/200x200/00FF00/000000/png">
  <img src="https://placehold.co/200x200/0000FF/FFFFFF/png">
</div>

#images img {
  transition: transform 0.7s;
}

Зациклить анимацию разворота можно через js:

.rotate {
  transform: rotateY(180deg);
}

const toggleRotate = el => el.classList.toggle('rotate');

document.querySelectorAll('#images img').forEach((n, i) => {
  setTimeout(setInterval, 300 * i, toggleRotate, 2000, n);
});

Или через css:

#images img {
  animation: rotate 4s infinite;
}

#images img:nth-child(1) { animation-delay:   0s; }
#images img:nth-child(2) { animation-delay: 0.3s; }
#images img:nth-child(3) { animation-delay: 0.6s; }

@keyframes rotate {
  0%, 75%, 100% {
    transform: rotateY(0deg);
  }
  25%, 50% {
    transform: rotateY(180deg);
  }
}