CSS3动画+@keyframe如何执行到最后

Question

当元素处于:hover状态时，我找不到播放动画直到结束的方法。

• 当我: hover离开时，动画会重置 - 但我希望它一直播放到结束。
• JsFiddle

<div class="picture"></div>

    .picture:hover {
       -webkit-animation:swing 1s ease-in-out;
    }


    @-webkit-keyframes swing {
      [...] 
    }

- Slake

---

我猜:hover标签不足以实现这个，我需要使用js或其他伪标签。 - Slake

Answer 1

这可能不是完整的解决方案，但请在您的图片类中添加以下内容：

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

JsFiddle：http://jsfiddle.net/5SueS/4/

这个解决方案在现代浏览器中已经不再适用。请参见css3 animation on :hover; force entire animation。

- Robert McKee

---

有趣的是，稍等一下后开始动画，但为什么动画不会在“:hover OUT”停止，因为动画是由“:hover”触发的。 - Slake

因为相同的动画正在图片类上触发（尽管延迟非常长）。 它看到它也有动画，所以即使在悬停结束后仍然继续播放。 可能有更好的方法，比如告诉它播放0次动画而不是漫长的延迟，但那是我尝试的第一件事，而且它起作用了。 - Robert McKee

这个解决方案不起作用。 - Andrew Magill

正确，这个解决方案不再可行。 - Robert McKee

Answer 2

我是这样做的： http://jsfiddle.net/Z5aq7/ 而不是悬停，我只是将其设置为一个类（.animate），并在悬停时添加该类。

$('.picture').hover(function(){
    $(this).addClass('animate');
});

希望这有所帮助！

- Jagadeesh J

Answer 3

看起来没有纯CSS的解决方案，所以最好的解决方案是使用JS：

Stackoverflow - 鼠标悬停时强制整个动画执行

- Slake