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

Question

如果有人能帮助我，我会很高兴。

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

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

悬停前：

悬停后：

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

How to make an animation start when you stop hovering over text?

html

css

animation

css-animations