CSS動畫：暫停

我有一個簡單的CSS3動畫，我想暫停懸停。CSS動畫：暫停

下面是一個簡化版本：

h1 { 
    animation-name: test 3000ms infinite alternate; 
} 
@keyframes test { 
    from { 
     transform: translate(0,0); 
    } 
    to { 
     transform: translate(100px,0); 
    } 
} 
h1:hover { 
    animation: paused; 
}

它的工作原理，但暫停手段跳回到0%狀態。有沒有一種方法可以：（a）在當前狀態下暫停（b）更優雅地重置，例如通過最後一個循環運行？

感謝

來源

2015-12-22 Manngo

的可能的複製【如何暫停和使用JavaScript恢復CSS3動畫？]（http://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using -javascript） – magreenberg

@magreenberg完全無關。（a）它不是問如何暫停它，這已經發生了，（b）我當然不需要一個簡單但無益的JavaScript解決方案。我正在尋找如何在暫停時突然重置狀態。 – Manngo

使用animation-play-state如下：

h1 { 
    animation-name: test; 
    animation-duration:3000ms; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
    animation-play-state:running;/*running normally*/ 
} 

h1:hover { 
    animation-play-state:paused; /*paused when hover*/ 
}

DEMO

注 - 不支持animation-play-state財產的Internet Explorer 9和較早的版本。

來源

2015-12-22 03:46:49

就是這樣。我甚至沒有注意到那個。這將非常有用。注：在_Internet Exploiter 9_中既沒有動畫也沒有過渡工作，所以沒有任何東西在那裏丟失......謝謝 – Manngo

酷..快樂編碼.. :) –

CSS動畫：暫停

回答

相關問題