CSS动画 - 在悬停时停止，并以与动画相同的方式返回

Question

我正在开发一个网站，其中包含动画，当您将鼠标悬停在某些元素上时，我无法让动画恢复到原始状态，而不仅仅是“硬切”在悬停元素后。 我要求的是，有没有办法让动画在悬停后向后播放？我正在使用动画填充模式：转发;在用户将鼠标悬停在元素上时使动画保持原位。任何答案都会有所帮助，无论是使用css还是javascript的解决方案。

Answer 1

在大多数情况下，您可以执行类似

的操作

element {
//animate the original state
}

element:hover {
//animate to another state
}

只要您的element区块中定义的动画为visually opposite，即如果在hover上顺时针旋转，则这些动画应为逆时针方向;它应该给你想要的效果。

对于您的用例，请发布一个小提琴。