css3動畫如何解決動畫的播放、暫停和重新開始

1、css3動畫如何解決動畫的播放、暫停和重新開始0921自我總結(jié)css3如何解決動畫的播放、暫停和重新開頭一.解決的本質(zhì)思路播放的解決思路先定義好動畫效果通過類名的增強達到樣式的浮現(xiàn)暫停的解決思路我們播放動畫時，如要暫停動畫，就要用到animation-play-state這個屬性。animation-play-state屬性有兩個值：paused: 暫停動畫;running: 繼續(xù)播放動畫;固然去掉animation-play-state，也可以繼續(xù)播放動畫。重新開頭解決思路播放與重新開頭的解決方法對于元素取多個類名,通過類名的刪除,替換注重點:這里不能刪除和添加類名為同一個,而且動畫要同一效

2、果,不同動畫名稱.不然動畫效果無法重置二.演示代碼 播放 暫停 重新開頭 keyframes mymove 0% margin-left: 0px; 50% margin-left: 400px; 100% margin-left: 0px; keyframes mymove1 0% margin-left: 0px; 50% margin-left: 400px; 100% margin-left: 0px; .box margin: 50px 0; width: 100px; height: 100px; background-color: 5578a2; .play animation:

3、 mymove 5s infinite ease; .restart animation: mymove1 5s infinite ease; .pause animation-play-state: paused; var play = document.getelementbyid(&39;play&39;), pause = document.getelementbyid(&39;pause&39;), restart = document.getelementbyid(&39;restart&39;), text = document.g

4、etelementbyid(&39;text&39;), box = document.getelementbyid(&39;box&39;); pause.addeventlistener(&39;click&39;, function() if (box.classlist.contains(&39;play&39;) box.classname = &39;pause play box&39; else box.classname = &39;pause restart box&39; tex

5、t.innerhtml = this.value; ); play.addeventlistener(&39;click&39;, function() if (box.classlist.contains(&39;play&39;) box.classname = &39;play box&39; else box.classname = &39;restart box&39; text.innerhtml = this.value; ); restart.addeventlistener(&39;click&39;, function() if (box.classlist.contains(&39;play&39;) box.classname = &39;restart box&39; else