Javascript 在同一对象上添加第二个动画将删除css属性

我正在尝试使用

div

和

border-bottom

属性创建进度条

我有两门课：

anim start

：这将使进度条从0%变为70%

anim end

：这将使进度条变为100%，并删除边框

我正在使用属性

动画填充模式：forwards

，以便css属性保持不变

问题是，当我应用第二个类时，它会删除前一个类的属性，因此进度条就会消失

请看下面的小提琴：

var progress\u bar=document.querySelector（“.progress”）
progress\u bar.className=progress\u bar.className+“动画开始”；
setTimeout（函数（）{
progress\u bar.className=progress\u bar.className+“动画结束”；
}, 3000);
.progress.anim-start{
动画持续时间：2秒；
动画名称：进度启动动画；
动画计时功能：轻松进出；
动画填充模式：正向；
}
@关键帧进度开始动画{
0% {
边框底部：5px实心#333；
宽度：0%；
}
100% {
边框底部：5px实心#333；
宽度：70%；
}
}
.progress.anim-end{
动画持续时间：2秒；
动画名称：进度结束动画；
动画计时功能：轻松进出；
动画填充模式：正向；
}
@关键帧进度结束动画{
99% {
宽度：100%
}
100% {
边框底部：无；
}
}
您可以从第一个动画结束的位置开始第二个动画：


var progress\u bar=document.querySelector（“.progress”）
progress\u bar.className=progress\u bar.className+“动画开始”；
setTimeout（函数（）{
progress\u bar.className=progress\u bar.className+“动画结束”；
}, 3000);
.progress.anim-start{
动画持续时间：2秒；
动画名称：进度启动动画；
动画计时功能：轻松进出；
动画填充模式：正向；
}
@关键帧进度开始动画{
0% {
边框底部：5px实心#333；
宽度：0%；
}
100% {
边框底部：5px实心#333；
宽度：70%；
}
}
.progress.anim-end{
动画持续时间：2秒；
动画名称：进度结束动画；
动画计时功能：轻松进出；
动画填充模式：正向；
}
@关键帧进度结束动画{
0% {
边框底部：5px实心#333；
宽度：70%；
}
99% {
宽度：100%
}
100% {
边框底部：无；
}
}

是的，我可以这样做，但是当它从第一个动画变为第二个动画时，会有一个非常小的（不太明显的）闪烁。我的问题是，为什么我的方法不起作用？@kartikan和你的第二个动画不是从0%开始的，但我认为这是不必要的。它不应该从以前的css值开始，现在继续到100%？@kartikan，第二个动画会覆盖第一个，所以当第二个动画放置时，它会刷新以前的宽度值。我的疑问是：我正在使用
动画填充模式：forwards
，所以第一个动画后的宽度值应该保持不变。第二，我在第二个动画中将宽度更改为100%，该动画运行2秒，那么进度条是否应该一直保持到100%，然后消失？