stop translate3D at some point

Trying to see on which browser the computedStyle isn't working

HTML

<div class='box'></div> 
<button class='toggleButton' value='play'>Play</button>

CSS

.box {
  margin: 30px;
  height: 50px;
  width: 50px;
  background-color: blue;
}
.box.someTranslate {
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
  transform: translate3d(550px,50px,0);
}

JavaScript

var blueBox = document.getElementsByClassName('box')[0];

document.getElementsByClassName('toggleButton')[0].onclick = function() {
  if(this.innerHTML === 'Play') 
  { 
    this.innerHTML = 'Pause';
    blueBox.classList.add('someTranslate');
  } else {
    this.innerHTML = 'Play';
    var computedStyle = window.getComputedStyle(blueBox),
        somePause = computedStyle.getPropertyValue('transform');
    blueBox.style.transform = somePause;
    blueBox.classList.remove('someTranslate');    
  }  
}