<div class="box"></div>
<div class="wrapper">
  <div class="demo" style="background:pink;">
    100
  </div>
  <div class="demo" style="background:orange;">
    100
  </div>
  <div class="demo" style="background:yellowgreen;">100</div>
  <div class="demo" style="background:blue;">
    100
  </div>
</div>
<button id="play">pley</button>
<button id="pause">pause</button>
.box{
  width:50px;
  height:50px;
  background:#f1b;;
  animation: play 8s infinite steps(1000,start);
}
@keyframes play{
  to {
    transform:translateX(400px);
  }
}

.wrapper{
  font-size:0;
  .demo{
    width:100px;
    height:50px;
    display:inline-block;
    font-size:12px;
  }
}
View Compiled
var $box = $(".box"),
   $play = $("#play"),
   $pause = $('#pause')

$play.on('click',function(){
  $box.css({
    "animation-play-state": "running"
  })
})

$pause.on('click',function(){
  $box.css({
    "animation-play-state": "paused"
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js