您好,登錄后才能下訂單哦!
本文將為大家詳細介紹“css3怎么讓animation動畫停止”,內(nèi)容步驟清晰詳細,細節(jié)處理妥當,而小編每天都會更新不同的知識點,希望這篇“css3怎么讓animation動畫停止”能夠給你意想不到的收獲,請大家跟著小編的思路慢慢深入,具體內(nèi)容如下,一起去收獲新知識吧。
在css3中,可用animation-play-state屬性來讓運行的animation動畫停止,該屬性的作用就是規(guī)定動畫正在運行還是暫停,只需要給應用了動畫的元素添加“animation-play-state:paused;”樣式即可。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css3中,可用animation-play-state屬性來讓運行的animation動畫停止。
例如:有這么一個不斷旋轉(zhuǎn)的動畫:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; margin: 50px auto; animation: mymove 1s linear infinite; } @keyframes mymove { 100% { transform: rotate(360deg); } } @-webkit-keyframes mymove {/* Safari and Chrome */ 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"></div> </body> </html>
想要讓div元素停止旋轉(zhuǎn),可以給div元素設置animation-play-state屬性來
div { width: 100px; height: 100px; background-color: red; margin: 50px auto; animation: mymove 1s linear infinite; animation-play-state:paused; }
說明:
animation-play-state 屬性規(guī)定動畫正在運行還是暫停。
語法:
animation-play-state: paused|running;
paused:規(guī)定動畫已暫停。
running:規(guī)定動畫正在播放。
該屬性可以和JavaScript一起使用,用于在播放過程中暫停動畫。
css的選擇器可以分為三大類,即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合,有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
感謝您能讀到這里,小編希望您對“css3怎么讓animation動畫停止”這一關鍵問題有了從實踐層面最深刻的體會,具體使用情況還需要大家自己動手實踐使用過才能領會,如果想閱讀更多相關內(nèi)容的文章,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。