Html 为什么不是'；t关键帧是否平滑？

所以我试图让文本闪烁，但我希望关键帧之间有一个平滑的过渡。我该怎么做

火灾{
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
动画名称：火；
动画持续时间：3s；
动画迭代次数：无限；
}
@关键帧火{
0% {
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
20% {
背景：-webkit线性梯度（红色、黄色、橙色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
40% {
背景：-webkit线性梯度（红色、橙色、橙色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
60% {
背景：-webkit线性梯度（橙色、黄色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
80% {
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
80% {
背景：-webkit线性梯度（红色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
}

---

闪烁闪烁

编辑：添加

动画计时功能：线性默认动画计时功能为
ease
，这将是一个更粗糙的动画


火灾{
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
动画名称：火；
动画持续时间：0.5s；
动画迭代次数：无限；
动画计时功能：线性；
}
@关键帧火{
0% {
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
20% {
背景：-webkit线性梯度（红色、黄色、橙色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
40% {
背景：-webkit线性梯度（红色、橙色、橙色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
60% {
背景：-webkit线性梯度（橙色、黄色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
80% {
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
100% {
背景：-webkit线性梯度（红色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
}
闪烁闪烁
编辑：添加
动画计时功能：线性默认动画计时功能为
ease
，这将是一个更粗糙的动画


火灾{
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
动画名称：火；
动画持续时间：0.5s；
动画迭代次数：无限；
动画计时功能：线性；
}
@关键帧火{
0% {
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
20% {
背景：-webkit线性梯度（红色、黄色、橙色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
40% {
背景：-webkit线性梯度（红色、橙色、橙色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
60% {
背景：-webkit线性梯度（橙色、黄色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
80% {
背景：-webkit线性梯度（黄色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
100% {
背景：-webkit线性梯度（红色、橙色、红色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
}
闪烁闪烁