CSS3动画+ @keyframe运行到最后[重复]答案

【问题标题】：CSS3 Animation + @keyframe run till the end [duplicate]CSS3动画+ @keyframe运行到最后[重复]
【发布时间】：2013-05-21 20:53:36
【问题描述】：

当元素为 :hover 时，我无法找到播放动画直到结束的方式。

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

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


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

【问题讨论】：

【解决方案1】：

好像没有纯css的解决方案，所以最好用JS解决：

【讨论】：

【解决方案2】：

可能不是一个完整的解决方案，但将以下内容添加到您的图片类中：

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

此解决方案不再适用于现代浏览器。请看css3 animation on :hover; force entire animation

【讨论】：

有趣，过了一会儿才开始动画 - 但是为什么动画不会在 ':hover OUT' 停止，因为动画是由 ':hover' 触发的。
因为在图片类上触发了相同的动画（尽管延迟很长）。它看到它也有动画，所以即使在悬停后它也会继续播放。可能有更好的方法，比如告诉它播放动画 0 次而不是长时间延迟，但这是我尝试的第一件事，它奏效了。
这个解决方案不起作用。
正确，此解决方案不再有效。

【解决方案3】：

我确实喜欢这个 http://jsfiddle.net/Z5aq7/

我只是将其设置为一个类 (.animate) 并在悬停时添加该类

，而不是悬停

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

希望这会有所帮助！

【讨论】：