Вложенная функция внутри функции цикла for | добавить/удалить класс | анимация ключевых кадров

привет, у меня есть цикл for, который считает от 1 до бесконечности, и я хотел бы изменить фон div и цвет «p» каждый раз, когда обновляется число. Это работает, когда я делаю цикл один раз (означает для первого изменения, но не ром анимации во второй раз. (числа постоянно обновляются)

   <div class = "section" id = "box">
      <p id = "demo">23375</p>
  </div>

мой CSS

.section {
  background-color: blue;
  margin: 1rem;
}

.pargraph-active,
.colorTransition {
  animation: colorTransition 2s ease-in-out;
}

@keyframes colorTransition {
  0% {
    background-color: blue;
  50% {
    color: white
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

и JS

let box = document.querySelector('#box');
let demo = document.querySelector('#demo');

function runAnimation() {
  box.classList.add('colorTransition');
  demo.classList.add('pargraph-active');
  console.info(`Animation started`);
}

function initialState() {
  box.classList.remove('colorTransition');
  demo.classList.remove('pargraph-active');
  console.info(`Initial State`);
}

(function theLoop(i) {
  setTimeout(
    function() {
      demo.innerHTML = i;
      if (i++) {
        theLoop(i);
      }
      runAnimation();
    },
    2000,
    initialState()
  );
})(1);