使用纯JS每x秒添加CSS动画吗？

如何解决使用纯JS每x秒添加CSS动画吗？

我有一个功能，它每3秒更新一次我主页上的文本，我希望文本在过渡时淡入/淡出。我有处理这个问题的非常简单的关键帧动画（fadeIn / fadeOut），但是我很难找出解决此问题的最佳方法。有人可以给我一些指示吗？谢谢！

  changeHomeText() {
    var count = 0;
    const phrases = ["Phrase 1","Phrase 2","Phrase 3","Phrase 4"];
    var text = document.getElementById('dyntext');
    text.innerHTML = phrases[0];

    setInterval(function() {
      if (count == phrases.length) {
        count=0;
      }
      text.innerHTML = phrases[count];
      count++;
    },3000);

  }

***CSS***

@keyframes fadeIn {
   from {opacity: 0;}
   to {opacity: 1;}
}
@keyframes fadeOut {
   from {opacity: 1;}
   to {opacity: 0;}
}

解决方法

无论您如何为文本添加动画效果，此功能都将永远有效，并且每3秒调用一次以更新文本

var count = 0;
var phrases = ["Phrase 1","Phrase 2","Phrase 3","Phrase 4"];
function changeHomeText() {
    var text = document.getElementById('dyntext');
    text.innerHTML = phrases[count];
    if (count == phrases.length) {
        count=0;
    }
    text.innerHTML = phrases[count];
    count++;

    setTimeout(function () {
        changeHomeText();
    },3000);
}
changeHomeText();

您可以在函数中做任何您想做的事，它每3秒就会重复一次。