如何通过平滑过渡到透明设置CSS渐变停止动画？

我有下面的密码。如何平稳过渡渐变停止？ 它只是从一个突然改变到另一个

我看到的大多数渐变动画示例似乎都使用渐变位置，但我相信更改渐变停止也应该是可能的

.test{
显示：内联块；
宽度：300px；
高度：300px；
边界半径：100%；
背景：圆锥梯度（红色，红色）；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
背景尺寸：自动；
-webkit面罩：径向梯度（圆形，透明50%，白色钙（50%+1px））；
动画：
旋转
4.5s
放松
0
无限的
没有一个
跑步
}
@关键帧旋转{
0% {
背景图像：圆锥梯度（红色、红色）；
}
30% {
背景图像：圆锥形渐变（红色70%，透明）；
}
70% {
背景图像：圆锥梯度（红色30%，透明，透明，透明）；
}
100% {
背景图像：圆锥梯度（红色，透明）；
}
}

---

在这种特殊情况下，您可以如下所示设置背景色层的动画：

.test{
显示：内联块；
宽度：300px；
高度：300px；
边界半径：100%；
背景：
圆锥渐变（红色，透明）
红色
-webkit面罩：径向梯度（圆形，透明50%，白色钙（50%+1px））；
动画：
旋转
4.5s
放松
0
无限的
没有一个
跑步
}
@关键帧旋转{
100% {
背景颜色：蓝色；
}
}

---

在这种特殊情况下，您可以如下所示设置背景色层的动画：

.test{
显示：内联块；
宽度：300px；
高度：300px；
边界半径：100%；
背景：
圆锥渐变（红色，透明）
红色
-webkit面罩：径向梯度（圆形，透明50%，白色钙（50%+1px））；
动画：
旋转
4.5s
放松
0
无限的
没有一个
跑步
}
@关键帧旋转{
100% {
背景颜色：蓝色；
}
}

---

自2020年12月3日起，此功能仅适用于Chrome或Edge 95+

可以使用CSS

@property

设置渐变动画

@属性--不透明度{
语法：“”；
初始值：100%；
继承：假；
}
.测试{
显示：内联块；
位置：绝对位置；
边界半径：100%；
背景图像：二次曲线梯度(
红色变量（--不透明度），
红色10%，
rgba（255,0,0,var（--opacity）），
透明,，
透明的
);
将改变：变换，背景图像；
宽度：200px；
高度：200px；
遮罩：径向梯度（圆形，透明47%，白色钙（47%+1px））；
-webkit面罩：径向梯度（圆形，透明47%，白色钙（47%+1px））；
动画：
圆锥梯度
4.5s
放松
0
无限的
没有一个
跑步
}
@关键帧圆锥梯度{
50% {
--不透明度：0%；
}
85% {
--不透明度：100%；
}
}

---

自2020年12月3日起，此功能仅适用于Chrome或Edge 95+

可以使用CSS

@property

设置渐变动画

@属性--不透明度{
语法：“”；
初始值：100%；
继承：假；
}
.测试{
显示：内联块；
位置：绝对位置；
边界半径：100%；
背景图像：二次曲线梯度(
红色变量（--不透明度），
红色10%，
rgba（255,0,0,var（--opacity）），
透明,，
透明的
);
将改变：变换，背景图像；
宽度：200px；
高度：200px；
遮罩：径向梯度（圆形，透明47%，白色钙（47%+1px））；
-webkit面罩：径向梯度（圆形，透明47%，白色钙（47%+1px））；
动画：
圆锥梯度
4.5s
放松
0
无限的
没有一个
跑步
}
@关键帧圆锥梯度{
50% {
--不透明度：0%；
}
85% {
--不透明度：100%；
}
}

---

这很有效，但不适用于我的具体情况，因为这是向透明的过渡，我编辑了这个问题，对此表示抱歉。@user5507535将蓝色替换为透明？当然，替换颜色很有效，但我如何才能从像

30%

的颜色转换为

70%

？我正在尝试一些选项。@user5507535 ok将考虑另一个选项idea@user5507535添加了另一个想法，不是一个完美的想法，但会尝试改进此作品，但不是针对我的具体案例，因为这是向透明的过渡，我编辑了问题，对此表示抱歉。@user5507535将蓝色替换为透明？当然，替换颜色很有效，但是我怎样才能从像

30%

这样的人变成

70%

？我正在尝试一些选项。@user5507535 ok将考虑另一个选项idea@user5507535添加了另一个想法，虽然不是完美的，但会努力改进