Javascript 在没有setTimeout的情况下删除和添加类时，不会出现Css动画

将class.is animated添加到.box元素时，它将执行更改背景的简单动画。 我想让它做这个简单的动画，比如说每2秒。问题是，如果它已经有了.is animated类，并且我删除了它，然后再次添加，那么动画不会发生，除非我将添加内容放入setTimeout函数中。为什么会这样？在这种情况下是否必须使用setTimeout

HTML

CSS

.box{
显示：内联块；
高度：50px；
宽度：50px；
背景：红色；
}
.box.is-animated{animation:changebg 1s ease；}
.box_two{左边距：50px；}
@关键帧更改bg{
0%{背景：红色；}
75%{背景：绿色；}
100%{背景：红色；}
}

JS

var-box\u-one=document.querySelector（'.box\u-one'）；
setInterval（函数（）{
box_one.classList.remove（'is-animated'）；
box_one.classList.add（'is-animated'）；
}, 2000);
var-box_-two=document.querySelector（'.box_-two'）；
setInterval（函数（）{
框2.classList.remove（'is-animated'）；
setTimeout（函数（）{
框2.classList.add（'is-animated'）；
}, 100);
}, 2000);

这不需要js，只需在动画属性中添加“无限”

至于问题本身，正如Niet the Dark Absol所指出的，如果在同一个迭代中添加和删除一个类，css永远不会计算它，那么确实需要使用超时

.box{
显示：内联块；
高度：50px；
宽度：50px；
背景：红色；
}
.box.is-animated{animation:changebg 2s ease infinite；}
.box_two{左边距：50px；}
@关键帧更改bg{
0%{背景：红色；}
50%{背景：绿色；}
100%{背景：红色；}
}

---

如果在同一个JS“循环”中删除该类并再次添加，它是否真的被删除了？（CSS看不到！）