アニメーションを実行、または一時停止の状態にします。このプロパティを参照することにより現在のアニメーションの状態を知ることができます。また、このプロパティに設定することにより、アニメーションを一時停止、開始することができます。アニメーションに関する概要は animation を参照してください。

@keyframes myframe {
  from {
    color: #66f;
    font-size: 20pt;
  }
  to {
    color: #f66;
    font-size: 24pt;
  }
}
.test {
  position: absolute;
  animation-name: myframe;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: paused;
}

<div>
 <input type="button" value="Start" onclick="document.getElementById('a1').style.animationPlayState='running'">
 <input type="button" value="Stop" onclick="document.getElementById('a1').style.animationPlayState='paused'">
</div>
<div id="a1" class="test">A</div>

• http://www.w3.org/TR/css3-animations/#animation-play-state-property
• https://developer.mozilla.org/ja/docs/Web/CSS/animation-play-state
• http://caniuse.com/#feat=css-animation