CSS3动画+ @keyframe运行，直到结束(CSS3 Animation + @keyfram

我找不到播放动画，直到结束时，一个元素是这样的：悬停。

• 当我：悬停出来，动画复位 - 但我希望它持续到年底。
• 的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所以最好的解决办法：

计算器-悬停力整个动画动画

文章来源: CSS3 Animation + @keyframe run till the end