Edit in JSFiddle

Result
CSS
HTML
JavaScript

 @keyframes left_move {
   from {left: 0px; }
   100%  {left: 200px; background:blue; color: #fff}
 }

div {
   width: 100px;
   height: 32px;
   margin-top:5px;
   background: pink;
   position: relative;
   animation-name: left_move;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}
 
 #ex1 { 
   animation-play-state: running;
 }

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <div id="ex1">running</div>
    <button type="button" id="btn">일시정지</button>
  </body>
</html>

var ani = document.getElementById("ex1");
var btn = document.getElementById("btn");
var play = true;
btn.addEventListener("click", function(){
	if (play) {
  	ex1.style.animationPlayState = "paused";
    ex1.innerHTML = "paused";
    this.innerHTML = "재생";
  } else {
  	ex1.style.animationPlayState = "running";
    ex1.innerHTML = "running";
    this.innerHTML = "일시정지";
  }
  play = !play;
}, false);