在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做了一个小小的程序。当点击【暂停】按钮时，动画会暂停；当点击【播放】按钮时，动画会继续播放。