CSS3动画+ @keyframe运行直到结束

我无法找到播放动画的方式，直到元素结束时：hover。CSS3动画+ @keyframe运行直到结束

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

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


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

2013-05-27 Slake

我想：悬停标签不足以做到这一点，我需要js或其他伪标签。 – Slake

可能不是一个完整的解决方案，但增加以下给你的图片类：

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

2013-05-29 03:39:12

有趣的是，在一段时间后开始动画 - 但为什么动画不会停在'：hover OUT'上，因为动画被'：hover'激发。 – Slake

因为在图片类中正在触发相同的动画（尽管延迟时间很长）。它看到它也有动画，所以即使在盘旋之后它也会继续播放。可能有更好的方法，比如告诉它播放动画0次而不是长时间的延迟，但这是我尝试的第一件事，它的工作原理。 –

似乎没有纯粹的CSS的解决方案，与JS所以最好的解决办法：

2013-05-29 02:56:00 Slake

而是徘徊，我只是做了它的类（.animate）并添加类悬停

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

希望这可以帮助！

2013-08-27 06:31:59

回答