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

Question

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

   <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.log(`Animation started`);
}

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

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

Answer 1

У вас есть какая-то ошибка в синтаксисе @keyframe, вам не хватает }, а также ; после цвета.

Я исправил это, и теперь оно работает, но я предлагаю вместо него использовать только css.

что-то подобное будет делать

animation: colorTransition 2s ease-in-out infinite; 

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

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

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

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

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

.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;
  }
}

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