在CSS3中,我们可以使用animation-play-state属性来定义动画的播放状态。

语法:

animation-play-state: 取值;

说明:

animation-play-state属性只有2个取值,如下表所示。

animation-play-state属性取值
属性值 说明
running 播放(默认值)
paused 暂停

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> @keyframes mytranslate { 0%{} 50%{transform:translateX(160px);} 100%{} } #ball { width:40px; height:40px; border-radius:20px; background-color:red; animation-name:mytranslate; animation-timing-function:linear; animation-duration:2s; animation-iteration-count:infinite; } #container { display:inline-block; width:200px; border:1px solid silver; } </style> <script> window.onload = function(){ var oBall = document.getElementById("ball"); var oBtnPause = document.getElementById("btn_pause"); var oBtnRun = document.getElementById("btn_run"); //暂停 oBtnPause.onclick = function(){ oBall.style.animationPlayState = "paused"; }; //播放 oBtnRun.onclick = function(){ oBall.style.animationPlayState = "running"; }; } </script> </head> <body> <div id="container"> <div id="ball"></div> </div> <div> <input id="btn_pause" type="button" value="暂停" /> <input id="btn_run" type="button" value="播放" /> </div> </body> </html>

浏览器预览效果如下图所示。

分析:

在这个例子中,我们使用JavaScript做了一个小小的程序。当点击【暂停】按钮时,动画会暂停;当点击【播放】按钮时,动画会继续播放。