Javascript Css转换不适用于Css动画

我在div上有一个简单的动画，它在：hover上改变背景颜色， 但是，当鼠标离开该div时，初始颜色的转换不起作用

如果有人有css或javascript解决方案，欢迎

.arc\u en\u ciel{
宽度：300px；
高度：300px；
背景色：rgb（64137126）；
-webkit过渡：背景色0.7s易于输入输出；
-moz过渡：背景色0.7s易入易出；
-o型过渡：背景色0.7s缓进缓出；
过渡：背景色0.7s缓进缓出；
}
.arc_en_ciel:悬停{
动画名称：动画；
动画持续时间：4s；
动画计时功能：轻松进出；
动画迭代次数：无限；
动画播放状态：运行；
}
@-webkit关键帧动画{
0%{背景色：rgb（64137126）；}
50%{背景色：#1f5e54；}
100%{背景色：rgb（64137126）；}
}
@关键帧动画{
0%{背景色：rgb（64137126）；}
50%{背景色：#1f5e54；}
100%{背景色：rgb（64137126）；}
}

---

问题在于CSS动画会为背景色设置动画，但不会更改值

因为颜色相同，所以停止悬停后不会出现过渡

您可以通过一个简单的转换获得您想要的：

.arc\u en\u ciel{
宽度：300px；
高度：300px；
背景色：rgb（64137126）；
过渡：背景色0.7s缓进缓出；
}
.arc_en_ciel:悬停{
背景色：#1f5e54；
过渡：背景色0.7s缓进缓出；
}

---

欢迎来到堆栈溢出！没有HTML，CSS对我们来说是无用的。请阅读。

animation

是CSS中的保留字，请尝试将动画重命名为独特的名称。您的意思是，当颜色从默认更改为动画颜色时，转换不起作用，反之亦然？（你的颜色太微妙了，很难看出区别，尝试更多的对比色）