Css 过渡不适用于 css 动画

Question

我在 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);}
}

<div class="arc_en_ciel"></div>

Answer 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;
}

<div class="arc_en_ciel"></div>

Css 过渡不适用于 css 动画

Css transition not working with css animation

html

javascript

css

animation

css-transitions