溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css3怎么讓animation動畫停止

發(fā)布時間:2022-01-20 16:37:40 來源:億速云 閱讀:663 作者:清風 欄目:web開發(fā)

本文將為大家詳細介紹“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>

css3怎么讓animation動畫停止

想要讓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;
}

css3怎么讓animation動畫停止

說明:

animation-play-state 屬性規(guī)定動畫正在運行還是暫停。

語法:

animation-play-state: paused|running;
  • paused:規(guī)定動畫已暫停。

  • running:規(guī)定動畫正在播放。

該屬性可以和JavaScript一起使用,用于在播放過程中暫停動畫。

css的選擇器有哪些

css的選擇器可以分為三大類,即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合,有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

感謝您能讀到這里,小編希望您對“css3怎么讓animation動畫停止”這一關鍵問題有了從實踐層面最深刻的體會,具體使用情況還需要大家自己動手實踐使用過才能領會,如果想閱讀更多相關內(nèi)容的文章,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI