当您停止将鼠标悬停在文本上时如何使动画开始？

【问题标题】：How to make an animation start when you stop hovering over text?当您停止将鼠标悬停在文本上时如何使动画开始？
【发布时间】：2021-12-04 10:30:56
【问题描述】：

如果有人可以帮助我，我会非常高兴。

我正在为网站制作导航栏，并制作了一个动画，当您将鼠标悬停在链接上时，它会慢慢过渡颜色。我是用 CSS 关键帧制作的。有谁知道如何让它当你停止悬停在它上面时，它会再次缓慢地转换回基色，而不是瞬间改变。提前感谢所有答案。

【问题讨论】：

在问题中贴出相关代码
这也可以通过简单的transition 属性而不是关键帧来完成

标签： html css animation css-animations

【解决方案1】：

这会将绿色文本慢慢变成黑色：

<html>
    <head>
        <style>
#h1 {
    color: green;
    transition: all 2s linear;
    font-size: 50px;
}

#h1:hover {
    color: black;
}
        </style>
    </head>
    <body>
<h1 id="h1">hello</h1>
    </body>
</html>

悬停前：

悬停后：

【讨论】：

我想你误解了我的意思。我希望当我将鼠标悬停在我的文本上时，它会慢慢改变颜色，当我将鼠标移离它（停止悬停）时，它会慢慢将其颜色改回我开始悬停之前的颜色。
它原来的颜色是绿色的，当你悬停它时它变成黑色，当鼠标没有悬停时它又回到原来的颜色
是的，但是当它从原始颜色变为黑色时，它不会慢慢过渡回原始颜色
你使用哪个浏览器
我用的是opera gx。