在CSS3中，我們可以使用animation-play-state屬性來定義動畫的播放狀態。
語法：
animation-play-state：取值;
說明：
animation-play-state屬性取值只有2個：running和paused。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-play-state屬性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
50%{-webkit-transform:translateX(200px);}
100%{}
}
#div1
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
}
#container
{
display:inline-block;
width:240px;
border:1px solid silver;
}
</style>
<script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn_pause").click(function () {
$("#div1").css("-webkit-animation-play-state", "paused");
});
$("#btn_run").click(function () {
$("#div1").css("-webkit-animation-play-state", "running");
});
})
</script>
</head>
<body>
<div id="container">
<div id="div1"></div>
</div>
<div id="control_btn">
<input id="btn_pause" type="button" value="暫停"/>
<input id="btn_run" type="button" value="播放"/>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡我使用jQuery做了一個小程序，當點擊“暫停”按鈕時，設置動畫的animation-play-state屬性值為“paused”；當點擊“播放”按鈕時，設置動畫的animation-play-state屬性值為“running”。這種效果就跟視頻播放器中的“開始”和“暫停”的效果一樣，很有趣吧。