css - CSS3 动画 + @keyframe 运行到最后

Question

当元素为：悬停时，我找不到播放动画的方法直到结束。

• 当 i :hover out 时，动画会重置 - 但我希望它一直持续到最后。
• 提琴手

<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/

此解决方案不再适用于现代浏览器。请在 :hover; 上查看 css3 动画；强制整个动画

Answer 2

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

而不是悬停，我只是将其设为一个类（.animate）并在悬停时添加该类

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

希望这可以帮助！

Answer 3

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

Stackoverflow - 悬停动画强制整个动画