问题：运行javascript更新HTML并使用CSS关键帧重放计数动画

我正在尝试使用HTML/CSS和Javascript/JQuery构建一个简单的web应用程序，它可以数到10，并一个接一个地显示数字。我的动画工作得很好，但是我还没有找到用JQuery在Javascript中更新和重新运行动画的最佳方法

我想让程序做的就是运行动画“grow number”，然后迭代h1.anim标记中的数字，然后按从1到10的顺序为每个数字显示相同的动画，以便浏览器显示动画计数序列

我尝试过使用setInterval和回调，但我肯定是做错了，所以我不会在代码中包含这些失败

*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体：普通200px无衬线；
字体系列：“流沙”，无衬线；
颜色：橙色；
}
.内容区{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
背景颜色：绿色；
最小高度：100vh；
/*不透明度：0%*/
}
.阿尼姆{
变换：比例（0）；
不透明度：0；
/*这个动画可能应该用javascript调用
或者jquery，但我没有任何运气让它工作和运行
我在这里取消注释只是为了显示
大体上是什么样子的*/
动画：增加数字4s 2s 10；
/*动画持续时间：4s；
动画名称：成长数；
动画延迟：2s；
动画迭代次数：10次*/
}
@关键帧会增加数量{
0% {
变换：比例（0）；
不透明度：0%；
}
10% {
不透明度：100%；
}
19% {
转换：比例（2.25）；
颜色：橙色；
}
20% {
变换：尺度（2）；
颜色：蓝色；
}
80% {
变换：尺度（2）；
颜色：蓝色；
}
90% {
不透明度：100%；
颜色：橙色；
}
100% {
变换：比例（0）；
颜色：橙色；
不透明度：0%；
}
}

数到10！
//这需要迭代并重新运行grow number动画
$（“.anim”）.text（1）；
$（“.anim”）.css({
“动画”：“增加4s数量”
});
0

请试试这个

请稍等，我正在调整计数之间的动画延迟

$（'.anim'）。每个（函数（）{
$（this.prop（'Counter'，0）。设置动画({
柜台：10
}, {
持续时间：40000，
步骤：功能（现在）{
$（this.text（Math.ceil（now））；
}
});
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体：普通200px无衬线；
字体系列：“流沙”，无衬线；
颜色：橙色；
}
.内容区{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
背景颜色：绿色；
最小高度：100vh；
/*不透明度：0%*/
}
.阿尼姆{
变换：比例（0）；
不透明度：0%；
动画：将数字4s2s10线性增长；
}
@关键帧会增加数量{
0% {
变换：比例（0）；
不透明度：0%；
}
10% {
不透明度：100%；
}
19% {
转换：比例（2.25）；
颜色：橙色；
}
20% {
变换：尺度（2）；
颜色：蓝色；
}
80% {
变换：尺度（2）；
颜色：蓝色；
}
90% {
不透明度：100%；
颜色：橙色；
}
100% {
变换：比例（0）；
颜色：橙色；
不透明度：0%；
}
}

数到10！
0