CSS过渡不适用于CSS动画答案

【问题标题】：Css transition not working with css animationCSS过渡不适用于CSS动画
【发布时间】：2021-08-09 04:18:00
【问题描述】：

我在 div 上有简单的动画，它在 :hover 上改变背景颜色，但是，当鼠标离开这个 div 时，初始颜色的过渡不起作用

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

.arc_en_ciel{
    width: 300px;
    height: 300px;
    background-color: rgb(64, 137, 126);

    -webkit-transition: background-color 0.7s ease-in-out;
    -moz-transition: background-color 0.7s ease-in-out;
    -o-transition: background-color 0.7s ease-in-out;
    transition: background-color 0.7s ease-in-out;
}

.arc_en_ciel:hover{
    animation-name: animation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}
@-webkit-keyframes animation{
    0%     {background-color: rgb(64, 137, 126);}
    50%  {background-color: #1f5e54;}
    100%  {background-color: rgb(64, 137, 126);}
}
@keyframes animation{
    0%     {background-color: rgb(64, 137, 126);}
    50%  {background-color: #1f5e54;}
    100%  {background-color: rgb(64, 137, 126);}
}

&lt;div class="arc_en_ciel"&gt;&lt;/div&gt;

【问题讨论】：

欢迎来到 Stack Overflow！没有您的 HTML，CSS 对我们毫无用处。请阅读how to create a minimal reproducible example。
animation 是 CSS 中的保留字，尝试将您的动画重命名为独特的。
你的意思是当颜色从默认颜色变为动画颜色时过渡不起作用，反之亦然？（你的调色板太微妙了，很难看出区别，尝试更多对比色）

标签： javascript html css animation css-transitions

【解决方案1】：

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

一旦停止悬停，就没有过渡，因为颜色相同。

通过简单的过渡，您可能会得到想要的东西：

.arc_en_ciel{
    width: 300px;
    height: 300px;
    background-color: rgb(64, 137, 126);
    transition: background-color 0.7s ease-in-out;
}

.arc_en_ciel:hover{
    background-color: #1f5e54;
    transition: background-color 0.7s ease-in-out;
}

&lt;div class="arc_en_ciel"&gt;&lt;/div&gt;

【讨论】：