首頁 >web前端 >css教學 >css3如何讓animation動畫停止

css3如何讓animation動畫停止

青灯夜游原創: 2022-01-20 16:14:0211524瀏覽

在css3中，可用animation-play-state屬性來讓運行的animation動畫停止，該屬性的作用就是規定動畫正在運行還是暫停，只需給應用了動畫的元素添加“animation-play -state:paused;」樣式即可。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css3中，可用animation-play-state屬性讓運行的animation動畫停止。

例如：有這麼一個不斷旋轉的動畫：

<!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元素停止旋轉，可以為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 屬性規定動畫正在運作還是暫停。

語法：

animation-play-state: paused|running;

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

此屬性可以和JavaScript一起使用，用於在播放過程中暫停動畫。

（學習影片分享：css影片教學）

以上是css3如何讓animation動畫停止的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 css css3 animation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼實現滑鼠移上去旋轉效果下一篇：css怎麼實現滑鼠移上去旋轉效果

看更多