保持动画播放，直到在CSS的UNDOVER上完成

Question

因此，我有一个制作动画的代码块：

.c:hover{
    animation: rotate 1s ease;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}

基本上，我希望动画即使在undover之后继续播放，直到结束

才能提供帮助？

Answer 1

我发现了解决方案，我使用JavaScript在时间过去后删除动画。

const animated = document.getElementById('c');

animated.onmouseenter = () => {
  // Need to remove the animation after its done, otherwise
  // It won't play again when the mouse is hovering on the element.
  setTimeout(() => animated.style.animation = '', 1000);

  animated.style.animation = 'rotate 1s ease';
}