Как настроить .delay и setTimeout?

Question

[Евгений Гайдуков]

Салют гуру вёрстки!

Кто поможет, как можно анимировать стрелку в цикле 5с активна и 5с чтобы замирала? Подозреваю что как-то через delay и setTimeout, но не знаю как это осуществить

Answer 1

[hzzzzl]

кодепен больше не разрешает сохранять анонимные пены, поэтому так

.hero__arrow {
    .........
   
    animation-name: floating;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
  
  &.paused {
    animation-play-state: paused;
  }
}

setInterval(() => {
  const arrow = document.querySelector('div.hero__arrow')
  arrow.classList.toggle('paused')
}, 1000)

Comments

[Kovalsky]

А почему не изначально анимацию сделать такую чтоб включала интервал?

[hzzzzl]

Никита Полевой, потому что я не хотел писать кейфреймы, естественно :D

[Евгений Гайдуков]

Да, спасибо, а я вот так запилил всё-таки, может кому пригодится

const animateArrow = () => {
      $(".hero__arrow").addClass("hero__arrow--animate").delay(6000).queue(function () {
        $(this).removeClass("hero__arrow--animate").dequeue();
      });
    }
    
    animateArrow();
    let timer = setInterval(
      () => {
        animateArrow()
      }, 10000)