<p>'Play' and 'reverse' an animation</p>

<div class="wrapper"> 

  <button id="start">Play</button>
  
  <button id="reverse">Reverse</button>
  
  <div id="box"></div>
    
</div>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #ccc;
}  
 
.wrapper {
  position: relative;
  top: 2.52em;
  width: 21.7em;
  height: 100%;
  margin: 0 auto;
}

p {
  font: lighter 24px "Helvetica Neue", sans-serif; 
  color: #222;
  letter-spacing: 2px;
  margin: 15px 0 0 0;
  padding: 0;
}

#box {
  position: relative;
  top: 40px;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border: 1px solid #333;
  border-radius: 15px;
}

#start, #reverse {
  margin: 0;
}

(function () {
   
    var box = document.getElementById('box'),
        start = document.getElementById('start'),
        reverse = document.getElementById('reverse');
 
    start.addEventListener('click', function() {
 
        var player = box.animate([{
            transform: 'rotate(0deg)' + 'scale(1.0)'
        }, {
            transform: 'rotate(180deg)' + 'scale(1.4)'
        }, {
            transform: 'rotate(360deg)' + 'scale(1.0)'
        }
 
        ], {
        duration: 1000,
        iterations: 1
             
        });
          reverse.addEventListener('click', function() {
          player.reverse();
    }, false);
 
    }, false);
    
})();