Html 悬停时，如何覆盖现有动画样式？

请参阅下面的代码片段。请注意，当您将鼠标悬停在某个项目上时，该项目的背景颜色会发生变化，但会忽略

transform:translateY（-5px）

。仅当未设置.list项动画时，悬停的变换样式才有效

如何让悬停的

translateY（-5px）

在代码中工作

.list{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
利润率：24px0；
}
.清单项目{
光标：指针；
边缘底部：14px；
填充：12px 16px；
边界半径：50px；
背景：#efef；
动画名称：popin；
动画填充模式：两者都有；
动画持续时间：.6s；
动画迭代次数：1；
动画计时功能：轻松；
动画延迟：0.1s；
}
。列表项：悬停{
背景颜色：黄色；
transform:translateY（-5px）；
}
@关键帧popin{
0%{
变换：比例（0）；
}
50%{
转换：比例（1.1）；
}
100%{
变换：比例（1）；
}
}

项目
项目
项目
项目
项目
项目

从动画中删除最后一个状态，因为它是默认状态，您将能够覆盖变换。基本上，动画将考虑元素的状态作为<代码> 100%代码/代码>，当你在悬停上改变它时，动画也会改变。

如果未指定100%或to关键帧，则用户代理将使用正在设置动画的属性的计算值构造100%关键帧

.list{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
利润率：24px0；
}
.清单项目{
光标：指针；
边缘底部：14px；
填充：12px 16px；
边界半径：50px；
背景：#efef；
动画名称：popin；
动画填充模式：两者都有；
动画持续时间：.6s；
/*动画迭代计数：1；也不需要*/
动画计时功能：轻松；
动画延迟：0.1s；
}
。列表项：悬停{
背景颜色：黄色；
transform:translateY（-5px）；
}
@关键帧popin{
0%{
变换：比例（0）；
}
50%{
转换：比例（1.1）；
}
}

项目
项目
项目
项目
项目
项目

前几天我实际上也遇到了类似的问题。我不能告诉你为什么它会这样，但我可以告诉你我是如何解决它的。我创建了另一个动画，并在

悬停

上激活了它。我使用了

动画填充模式：forwards

，因此动画只有在您将鼠标悬停在其他位置后才会返回其初始状态。 试试看，让我知道你的想法

.list{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
利润率：24px0；
}
.清单项目{
光标：指针；
边缘底部：14px；
填充：12px 16px；
边界半径：50px；
边框颜色：黑色；
边框：1px纯黑；
背景：#efef；
动画名称：popin；
动画填充模式：两者都有；
动画持续时间：.6s；
动画迭代次数：1；
动画计时功能：轻松；
动画延迟：0.1s；
}
。列表项：悬停{
动画：上拉0.3秒，向前放松；
背景颜色：黄色；
}
@关键帧popin{
0%{
变换：比例（0）；
}
50%{
转换：比例（1.1）；
}
100%{
变换：比例（1）；
}
}
@关键帧上拉{
0% {
变换：translateY（0）；
}
100% {
transform:translateY（-5px）；
}
}

项目
项目
项目
项目
项目
项目

thx但这会导致项目在加载时闪烁——现在发生的是，您看到项目，然后项目会动画化……当您第一次运行代码片段时，您会看到flashing@AnApprentice隐马尔可夫模型。。。你想为翻译进行转换吗？因为我有另一个解决方案transition@AnApprentice好的，那么你想要过渡，我会考虑。。。请不要更新问题以删除旧问题，因为我的答案现在不相关：）只需编辑即可添加您想要的问题transition@AnApprentice在这种情况下，您可以简单地考虑一个额外的包装器，比如“代码>……/代码>。在这里，您将标尺添加到项中，并将转换添加到内部div中，然后您的所有内容都是。但是这会引起各种各样的跳跃和闪动。你介意把这段话写成可运行的片段吗？非常有用。。在这个片段中。您会注意到，当鼠标悬停然后移除鼠标时，项目会闪烁。不需要闪烁。闪烁是由

popin

动画引起的<代码>弹出按钮在鼠标离开时触发。