Safari Transform Transition

HTML

<div id="square"></div>

CSS

#square {
  position: absolute;
  top: 10px;
  left: 10%;
  width: 100px;
  height: 0;
  padding-top: 80px;
  background: pink;
  -webkit-transform: translate3d(-50%, 5%);
  transform: translate3d(-50%, 5%);
  -webkit-transition: -webkit-transform 2s, width 2s, padding 2s;
  transition: transform 2s, width 2s, padding 2s;
}

#square.transformed {
  width: 50px;
  padding-top: 30px;
  -webkit-transform: translate3d(-50%, 65%);
  transform: translate3d(-50%, 65%);
}

JavaScript

var square = document.getElementById("square"),
		bool = true;
setInterval(function(){
  if(bool) {
    square.className = "transformed";
  } else {
  	square.className = "";
  }
  bool = !bool;
}, 3000);