CSS3的animation直接提供一個 animation-play-state 屬性規定動畫正在執行還是暫停。寫動畫樣式的時候特別注意下不同瀏覽器的相容性，加上對應的字首：

div{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

只需要在對應的有animation元素節點上，透過動態增加刪除這個樣式就可以控制動畫的開始與暫停了，非常簡單。

語法

animation-play-state: paused|running;

paused 規定動畫已暫停；running 規定動畫正在播放。

相容性：

Internet Explorer 10、Firefox 以及 Opera 支援 animation-play-state 屬性。Safari 和 Chrome 支援替代的 -webkit-animation-play-state 屬性。

注意：

iOS 8-9 Safari,ios11的系統，微信裡瀏覽器不行，動畫開始就不能暫停。

解決方法使用** -webkit-animation： none！important; 而不是 -webkit-animation-play-state：paused; **

.no-animation {
 -webkit-animation：none！important; 
}