Css 使动画停留在悬停动画之后

如果将鼠标悬停在“悬停效果”菜单项上，您会注意到，悬停动画结束后会返回其原始状态（文本返回到原来的位置）。我希望文本保持在原来的位置，直到您从菜单中取消悬停

CSS:

---

您可能必须实现jQuery解决方案。见下文

$(document).ready(function(){
    $('.menu').on('mouseenter',function(){
        $(this).animate({'backgroundColor':'#e03333',
            'color':'#ffffff'},200,'linear');
    });
});

---

使用

动画填充模式：向前

-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;

---

但是，使用

：hover

不起作用，因为一旦鼠标退出，它将返回到不包含：hover css的前一个状态。因此，最好在鼠标悬停时使用javascript添加类名，这样当鼠标悬停时，它仍然保持鼠标悬停状态。

您可以使用两个动画，一个持续3秒，另一个持续9999秒。它不会永远持续，但几乎

。菜单a{
颜色：#505050；
位置：相对位置；
文字装饰：无；
左边距：5px；
右边距：5px；
过渡：1s；
左侧填充：20px；
右边填充：20px；
填充顶部：26px；
垫底：25px；
过渡：1s；
}
@-webkit关键帧菜单{
0%{top:0；}
10%，100%{顶部：10px；}
}
@-webkit关键帧菜单2{
0%{top:10px；}
100%{top:10px；}
}
.菜单a：悬停{
背景色：#e03333；
颜色：#ffffff；
-webkit动画名称：菜单，菜单2；
-webkit动画持续时间：3s，9999秒；
-webkit动画延迟：0秒，1秒；
-webkit动画迭代计数：1；
}

---

测试

您可以在两种状态上设置不同的转换时间：

a{
过渡：1.5s；
}
a:悬停{
背景：番茄；
过渡：0.3s
}

-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;