在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>
#想要讓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;
}
說明：
animation-play-state 屬性規定動畫正在運作還是暫停。
語法：
animation-play-state: paused|running;
paused：規定動畫已暫停。
running：規定動畫正在播放。
此屬性可以和JavaScript一起使用，用於在播放過程中暫停動畫。
（學習影片分享：css影片教學）
以上是css3如何讓animation動畫停止的詳細內容。更多資訊請關注PHP中文網其他相關文章！
