CSS线性渐变进度动画

我制作了一个动画，显示了一个倒计时，直到敬酒通知消失：

.toastDiv{
动画：toasprogress 3s ease；
边框：1px实心rgba（0,0,0,5）；
边界半径：5px；
长方体阴影：0.5px 0 rgba（0,0,0,25）；
利润率：0.01×0；
填料：1×1米；
}
@关键帧到进程{
0% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 0%，白色0%，白色100%）；
}
10% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 10%，白色10%，白色100%）；
}
20% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 20%，白色20%，白色100%）；
}
30% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 30%，白色30%，白色100%）；
}
40% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 40%，白色40%，白色100%）；
}
50% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 50%，白色50%，白色100%）；
}
60% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 60%，白色60%，白色100%）；
}
70% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 70%，白色70%，白色100%）；
}
80% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 80%，白色80%，白色100%）；
}
90% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 90%，白色90%，白色100%）；
}
100% {
背景：线性梯度（向右，aliceblue 0%，aliceblue 100%，白色100%，白色100%）；
}
}

---

您好

您可以依赖

背景大小

动画和

步骤（）

如下所示：

.toastDiv{
边框：1px实心rgba（0,0,0,5）；
边界半径：5px；
长方体阴影：0.5px 0 rgba（0,0,0,25）；
利润率：0.01×0；
填料：1×1米；
背景：
线性梯度（aliceblue，aliceblue）没有重复，
白色
动画：前进5步（10步，开始）；
}
@关键帧到进程{
0% {
背景大小：0%100%；
}
100% {
背景大小：100%100%；
}
}

你好 没有步骤