<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 linear;
}
@keyframes play{
  0% {
    transform:translateX(0);
  }
  50% {
    transform:translateX(200px);
    width:100px;
  }
  100% {
    transform:translateX(400px);
    width:150px;
  }
}

.wrapper{
  font-size:0;
  .demo{
    width:100px;
    height:50px;
    display:inline-block;
    font-size:12px;
  }
}

var $box = $(".box"),
   $play = $("#play"),
   $pause = $('#pause')
   timer = null

$box.on('animationstart',function(){
  timer = setInterval(function(){
    $box.text($box.width())
  },100)
})
$box.on('animationend',function(){
  clearInterval(timer)
})
$play.on('click',function(){
  $box.css({
    "animation-play-state": "running"
  })
})

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