保持动画播放，直到在CSS中取消悬停时结束

k2fxgqgv 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(104)

我有一段代码来制作动画：

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

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

基本上，我希望动画继续播放，即使在unhover，直到它结束
有人能帮忙吗？

css

来源：https://stackoverflow.com/questions/72270437/keep-animation-playing-until-it-finished-on-unhover-in-css

1条答案

按热度按时间

2skhul331#

我想出了解决办法，我用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';
}

赞(0）回复(0）举报 2023-03-20

我来回答

保持动画播放，直到在CSS中取消悬停时结束

1条答案

相关问题

热门标签

最新问答