怎么使css動畫停止,如何用純CSS方式實現(xiàn)CSS動畫的暫停與播放效果？animation

1、怎么使css動畫停止，如何用純CSS方式實現(xiàn)CSS動畫的暫停與播放效果？animation。使用純CSS的方法，暫停或播放CSS動畫。是不是看起來應(yīng)該是不可能的實現(xiàn)的；或者就算可以實現(xiàn)，也是一個很麻煩的實現(xiàn)方法，需要用大量的css樣式才可以實現(xiàn)。其實不然，在CSS3animation中，就有這樣一個屬性可以做到暫停、播放動畫。本章就給大家介紹如何用純CSS方式實現(xiàn)CSS動畫的暫停與播放效果？animation-play-state屬性介紹(詳解)。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。animation-play-state屬性animation-play-state:

2、paused|running;animation-play-state:屬性定義一個動畫是否運行或者暫停?？梢酝ㄟ^查詢它來確定動畫是否正在運行。另外，它的值可以被設(shè)置為暫停和恢復的動畫的重放。如果借助Javascript，我們可以實現(xiàn)控制CSS動畫的運行和播放，下面列出部分關(guān)鍵代碼：html代碼：stopcss代碼：.animationwidth:100px;height:100px;margin:50pxauto;background:deeppink;animation:move2slinearinfinitealternate;keyframesmove0%transform:trans

3、late(-100px,0);100%transform:translate(100px,0);.btnwidth:50px;margin:10pxauto;text-align:center;border:1pxsolid#ddd;padding:10px;border-radius:5px;cursor:pointer;&:hoverbackground:#ddd;color:#333;&:activebackground:#aaa;js代碼:document.querySelector(.btn).addEventListener(click：function()letbtn=docum

4、ent.querySelector(.btn);letelem=document.querySelector(.animation);letstate=elem.styleanimationPlayState;if(state=paused)elem.styleanimationPlayState=running;btn.innerText=stop;elseelem.styleanimationPlayState=paused;btn.innerText=play;);效果圖(播放時和停止播放后)：純CSS實現(xiàn)下面我們探討下，使用純CSS的方式能否實現(xiàn)。hover偽類實現(xiàn)使用hover偽類，

5、在鼠標懸停在按鈕上面時，控制動畫樣式的暫停。關(guān)鍵代碼如下:html代碼：stopcss代碼：.animationwidth:100px;height:100px;margin:50pxauto;background:deeppink;animation:move2slinearinfinitealternate;inputdisplay:none;keyframesmove0%transform:translate(-100px,0);100%transform:translate(100px,0);.btnwidth:50px;margin:10pxauto;text-align:cente

6、r;border:1pxsolid#ddd;padding:10px;border-radius:5px;cursor:pointer;&:hoverbackground:#ddd;color:#333;&:activebackground:#aaa;.stop:hover.animationanimation-play-state:paused;效果圖：當然，這個方法不夠智能，如果釋放鼠標的自由，點擊一下暫停、再點擊一下播放就好了。還有其他方法嗎？checked偽類實現(xiàn)之前的文章有趣的CSS題目(8):純CSS的導航欄Tab切換方案也談過，使用radio標簽的checked偽類，加上實現(xiàn)純C

7、SS捕獲點擊事情。并且利用被點擊的元素可以控制一些CSS樣式。實現(xiàn)如下：html代碼：stopplaycss代碼:.animationwidth:100px;height:100px;margin:50pxauto;background:deeppink;animation:move2slinearinfinitealternate;inputdisplay:none;keyframesmove0%transform:translate(-100px,0);100%transform:translate(100px,0);.btnwidth:50px;margin:10pxauto;text-

8、align:center;border:1pxsolid#ddd;padding:10px;border-radius:5px;cursor:pointer;&:hoverbackground:#ddd;color:#333;&:activebackground:#aaa;#stop:checked.animationanimation-play-state:paused;#play:checked.animationanimation-play-state:running;我們希望當#stop和#play兩個radio被點擊時，給.animation元素分別賦予animation-play-state:paused或是animation-play-state:running。而且二者只能生效其一，所以需要給兩個radio標簽