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

回答