如何在未悬停时暂停关键帧动画
How to pause keyframe animation when not hovered
我有一个关键帧动画来移动蒙版位置，并在悬停按钮时应用。但是当我停止悬停它时，遮罩位置重置为 0，这使得过渡有点奇怪。
以下是关键帧：
@keyframes waving-mask {
0% {
mask-position: 0% 0;
}
100% {
mask-position: 100% 0;
}
}
如何 运行 鼠标悬停时的动画和停止悬停元素时暂停在关键帧位置的动画？
我找到了答案，悬停animation是一个错误的方法。而是将动画放在 class 中，然后添加
animation-play-state: paused;
然后将下面的内容添加到悬停伪class
animation-play-state: running;
我有一个关键帧动画来移动蒙版位置，并在悬停按钮时应用。但是当我停止悬停它时，遮罩位置重置为 0，这使得过渡有点奇怪。
以下是关键帧：
@keyframes waving-mask {
0% {
mask-position: 0% 0;
}
100% {
mask-position: 100% 0;
}
}
如何 运行 鼠标悬停时的动画和停止悬停元素时暂停在关键帧位置的动画？
我找到了答案，悬停animation是一个错误的方法。而是将动画放在 class 中，然后添加
animation-play-state: paused;
然后将下面的内容添加到悬停伪class
animation-play-state: running;