播放
先在@keyframes中创建动画，之后把它捆绑到某个选择器，就可以产生动画效果。
html css
@keyframes mymove { 0% { margin-left: 0px; } 50% { margin-left: 400px; } 100% { margin-left: 0px; } }.box { margin: 50px 0; width: 100px; height: 100px; background-color: #5578a2; animation: mymove 5s infinite ease; } 暂停
我们播放动画时，如要暂停动画，就要用到animation-play-state这个属性。animation-play-state属性有两个值：
paused: 暂停动画;running: 继续播放动画;
当然去掉animation-play-state，也可以继续播放动画。
重新开始
如果要重新开始动画，加载一个相同的动画，不同名字，可以达到重新开始动画的效果。
效果：
代码部分：
html
css
@keyframes mymove { 0% { margin-left: 0px; } 50% { margin-left: 400px; } 100% { margin-left: 0px; } } @keyframes mymove1 { 0% { margin-left: 0px; } 50% { margin-left: 400px; } 100% { margin-left: 0px; } } .box { margin: 50px 0; width: 100px; height: 100px; background-color: #5578a2; } .play { animation: mymove 5s infinite ease; } .restart { animation: mymove1 5s infinite ease; } .pause { animation-play-state: paused; } js
var play = document.getElementById('play'), pause = document.getElementById('pause'), restart = document.getElementById('restart'), text = document.getElementById('text'), box = document.getElementById('box'); pause.addEventListener('click', function() { if (box.classList.contains('play')) { box.className = 'pause play box'; } else { box.className = 'pause restart box'; } text.innerHTML = this.value; }); play.addEventListener('click', function() { if (box.classList.contains('play')) { box.className = 'play box'; } else { box.className = 'restart box'; } text.innerHTML = this.value; }); restart.addEventListener('click', function() { if (box.classList.contains('play')) { box.className = 'restart box'; } else { box.className = 'play box'; } text.innerHTML = this.value; });