移动动画后，按钮悬停不再起作用

Question

我正在尝试创建两个按钮，这些按钮在单击时会向上移动。我的问题是动画发生后，按钮的悬停动画不再起作用。从我的研究中，我发现这与animation-fill-mode: forward有关，但是我发现没有解决方案可以使按钮正确设置动画。这是我的相关代码

https://jsfiddle.net/kaizerroll987/j4owy2x7/#&togetherjs=qrfIRBIkon

Answer 1

前向动画将使元素在动画结束时保留最后一个关键帧的样式值。只需删除animation-fill-mode属性，您的hover动画就可以正常工作。

Answer 2

我要随机刺一击。这里严重缺乏信息...

将鼠标悬停时，将animation-name或animation-fill-mode设置为none。

.elem:hover {
    whatever: settings-you-want;
    animation-name: none;

}

我刚刚做了类似的事情。 动画将优先于悬停。