How to delay transition for alternate elements?

section_swipe = document.querySelectorAll("p.swipe")

section_swipe.forEach((v) => {
  setInterval(() => v.classList.toggle('revealed'), 3000)
})
p.swipe {
  height: auto;
  padding: 1vh;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bar {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: 1s ease-in-out;
}

.content {
  color: rgba(0, 0, 0, 0);
  display: inline-block;
}

.revealed .bar {
  transform: translate(100%, 0%) translate3d(0px, 0px, 0px);
  background: #232323;
}

.revealed .content {
  animation-duration: 1s;
  animation-name: reveal_section;
  color: #232323;
}

@keyframes reveal_section {
  0% {
    color: rgba(0, 0, 0, 0);
  }
  50% {
    color: rgba(0, 0, 0, 0);
  }
  51% {
    color: #232323;
  }
  100% {
    color: #232323;
  }
}

.bar:nth-of-type(even) {
  transition-delay: 1s;
}

.content:nth-of-type(even) {
  animation-delay: 1s;
}
<div>
  <p class="swipe">
    <span class="content">
      Hello</span>
    <span class="bar"></span>
  </p>
  <p class="swipe">
    <span class="content">World</span><span class="bar"></span>
  </p>
</div>

I want the bar transition and reveal animation for ‘world’ to start after a slight delay and not at the same time as ‘Hello’. I have tried using nth-of-type but its effectively delaying both instead of just ‘world’. The reveal animation of content should also be in sync with the delay for bar. It needs to work for multiple elements, not just two.



nth-of-type work between siblings that share the same parent, which neither of your .bar and .content does.

If you target the .swipe instead it will work

.swipe:nth-of-type(even) .bar {
  transition-delay: 1s;
}

.swipe:nth-of-type(even) .content {
  animation-delay: 1s;
}

Stack snippet