Javascript 每次迭代的随机CSS动画时间

尝试在每次迭代中设置随机动画时间。我设置了一个CSS自定义属性

——动画时间

在每次使用JS的动画迭代中随机更改

let square=document.getElementById（'square'）；
让时间；
square.addEventListener（'animationiteration'，持续时间）；
函数持续时间（）{
时间=Math.random（）+1；
setProperty（'--animation time'，time+'s'）；
console.log（时间）；
}

：根目录{
--动画时间：5s；
--颜色-1:#ff0000；
--颜色-2:#ffee00；
}
@关键帧火{
0% {
背景色：var（--color-1）；
}
100% {
背景色：var（--color-2）；
}
}
#方格{
宽度：100px；
高度：100px；
动画：fire var（--动画时间）ease alternate infinite；
}

---

当您更改

动画持续时间时，您不仅会更改每次迭代的方式，还会更改整个动画。例如，如果您将
3s
作为持续时间，那么第一次迭代将采用
3s
，如果在
3s
（迭代结束）处更改为
5s
，这就像您创建了另一个动画，其中迭代将持续5s，您将跳转到新动画的新状态，即
3s
或
5s

下面是一个更好地说明这个问题的例子。我会不断增加持续时间，您会注意到，一旦您到达迭代的末尾，您将返回到以前的状态，因为您增加了持续时间，然后您将再次到达最后一个状态，您将返回，依此类推

这就像有人跑向
100%
状态，而你一直在增加该状态


let square=document.getElementById（'square'）；
设时间=1；
square.addEventListener（'animationiteration'，持续时间）；
函数持续时间（）{
时间*=2；
setProperty（'--animation time'，time+'s'）；
console.log（时间）；
}
：根目录{
--动画时间：1s；
}
@关键帧火{
0% {
背景色：红色；
}
50% {
背景：黄色；
}
100% {
背景色：黑色；
}
}
#方格{
宽度：100px；
高度：100px；
动画：fire var（--动画时间）ease无限交替；
}