Html 有没有可能让这个部门顺利运作？

我试图在更改颜色时使这个

div

平滑移动，但问题是在它应该转换为

#bad455

颜色之前，它会短暂停止

所以我想知道有什么方法可以让它不停地顺利进行

div{
背景色：黑色；
宽度：300px；
高度：300px；
保证金：0自动；
}
div:悬停{
动画名称：anim1；
动画持续时间：3s；
}
@关键帧动画1{
0% {
背景颜色：粉红色；
边缘顶部：10px；
}
50% {
背景颜色：黄色；
边缘顶部：20px；
}
100% {
背景色：#bad455；
边缘顶部：30px；
}
}

---

将迭代计数设置为无限，以便动画继续运行，并将最后一个关键帧的边距设置回0，以便返回默认状态

div{
背景色：黑色；
宽度：300px；
高度：300px；
保证金：0自动；
}
div:悬停{
动画名称：anim1；
动画迭代次数：无限；
动画持续时间：3s；
}
@关键帧动画1{
0% {
背景颜色：粉红色；
边缘顶部：10px；
}
50% {
背景颜色：黄色；
边缘顶部：30px；
}
100% {
背景色：#bad455；
边际上限：0px；
}
}

---

在div标签中尝试以下操作：

 -webkit-transition: width 2s; 
    transition: width 2s;

---

使用

线性

作为定时功能，默认为

ease