Javascript 在css中的特定时间内暂停交互中的动画

我想在重复动画之间的特定时间暂停动画

我将从json文件中获取数据，例如1s暂停、2s暂停、3s暂停、4s暂停

我只能使用javascript/css技巧来暂停动画

Animation is purely made in CSS. 

https://codepen.io/prax/pen/WORMEJ

提前感谢

在任何“获取数据”功能中，应用

动画播放状态：暂停添加到要暂停的元素，然后在准备取消暂停时删除该元素

这是一个演示


document.getElementById（'button'）.addEventListener（'click'，function（）{
//获取数据并暂停&设置超时以取消暂停
document.getElementById（'div'）.classList.add（'pause'）；
var seconds=1；//使用不同的值暂停不同的时间
var timeout=setTimeout（函数（）{
document.getElementById（'div'）.classList.remove（'pause'）；
}，秒*1000）
})
div{
动画：Foo3sInfinite；
}
@关键帧foo{
50% {
颜色：红色；
}
}
.暂停{
动画播放状态：暂停；
背景：#eee；
}
asdf
按钮
在任何“获取数据”功能中，应用
动画播放状态：暂停添加到要暂停的元素，然后在准备取消暂停时删除该元素

这是一个演示


document.getElementById（'button'）.addEventListener（'click'，function（）{
//获取数据并暂停&设置超时以取消暂停
document.getElementById（'div'）.classList.add（'pause'）；
var seconds=1；//使用不同的值暂停不同的时间
var timeout=setTimeout（函数（）{
document.getElementById（'div'）.classList.remove（'pause'）；
}，秒*1000）
})
div{
动画：Foo3sInfinite；
}
@关键帧foo{
50% {
颜色：红色；
}
}
.暂停{
动画播放状态：暂停；
背景：#eee；
}
asdf
按钮
我正在获取错误索引。html:8未捕获类型错误：无法读取的属性“addEventListener”null@PrakharMaheshwari您不需要使用代码的这一部分，如果不清楚的话，很抱歉。我添加了一个按钮，这样你就可以触发暂停。您只需在“获取数据”时获取
addEventListener
函数的内容，并将其放在页面上即可。我正在获取错误索引。html:8未捕获类型错误：无法读取的属性“addEventListener”null@PrakharMaheshwari您不需要使用代码的这一部分，如果不清楚的话，很抱歉。我添加了一个按钮，这样你就可以触发暂停。您只需获取
addEventListener
函数的内容，并在“获取数据”时将其放在页面上，不管是什么。