setInterval animation sequence

by ShaCP

HTML

<p id="one"  tabindex="-1">one</p>
<!-- style="" -->

CSS

p {
  border: 1px solid black;
  display: inline-block;
  animation: anim 1.5s linear forwards;
  /* animation: transform 1.5s linear forwards infinite alternate; */
  transform: translateY(100px);
  color: red;
}

.anim1 {
  transform: translate(100px);
}

.anim2 {
  transform: translate(100px, 100px);
}

.anim3 {
  transform: translate(0px, 100px);
}

.anim4 {
  transform: translate(100px, 200px);
}

.anim5 {
  transform: translate(0px, 200px);
}

body {
  height: 100vh;
  font-size: 2rem;
  font-family: sans-serif;
}

@keyframes anim {
  from {
    transform: translate(0);
  }
}

JavaScript

function* makeRangeIterator(start = 0, end = 100, step = 1) {
  let iterationCount = 0;
  for (let i = start; i < end; i += step) {
    iterationCount++;
    yield `anim${i}`;
  }
  return iterationCount;
}

var animIterator = makeRangeIterator(1, 6, 1)

var animationSetter = setInterval(() => {
  /*  one.classList.add(animIterator.next().value) */
  document.body.innerHTML = `<p id="one" class=${animIterator.next().value} tabindex="-1">one</p>`
  if (!animIterator.next().value) {
  clearInterval(animationSetter);
  } 
}, 2200);