Css 凌驾；动画填充模式：向前"；通过添加类

为什么我们不能覆盖“向前动画”？我添加了一个简单的示例。即使使用

也无法覆盖！重要信息

//单击并添加蓝色类
document.querySelector（“.box”）.addEventListener（“单击”，e=>{
e、 target.classList.add（“蓝色”）；
控制台日志（“添加蓝色类”）；
})

.box{
宽度：80px；
高度：80px；
背景：粉红色；
动画：改变颜色。3s线性向前；
}
@关键帧会改变颜色{
到{
背景：绿色；
}
}
蓝先生{
背景：蓝色！重要；
}

---

可以使用不同的方法修复此问题

如果你能调整动画，你可以考虑CSS变量：

//单击并添加蓝色类
document.querySelector（“.box”）.addEventListener（“单击”，e=>{
e、 target.classList.add（“蓝色”）；
控制台日志（“添加蓝色类”）；
})

.box{
宽度：80px；
高度：80px；
背景：粉红色；
动画：改变颜色。3s线性向前；
}
@关键帧会改变颜色{
到{
背景：var（--c，绿色）；
}
}
蓝先生{
--c:蓝色；
}

---

因为动画在这种情况下总是赢的顺便说一句，你想知道为什么（不容易）或者只是一个修复（容易）？只修复足够多