CSS3动画+ @keyframe一直运行到最后

Question

当元素为：hover时，我找不到播放动画的方式。

• 当我：徘徊时，动画重置 - 但我想让它一直持续到最后。
• JsFiddle

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

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


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

Answer 1

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

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

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

Answer 2

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

而不是悬停，我只是让它成为一个类（.animate）并在悬停时添加类

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

希望这有帮助！

Answer 3

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

Stackoverflow - animation on hover force entire animation