Edit in JSFiddle

html {
  background: #f2f2f2;
}
p {
  font-family: "helvetica", Arial, sans-serif;
  text-align: center;
}
.box {
  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);

  transform: translate(0, 0);
  transition: transform 500ms;

  will-change: transform;
}
.box.move {
  transform: translate(100px, 100px);
}

var box = document.querySelector('.box');
    box.addEventListener('click', function () {
        box.classList.toggle('move');
    }, false);

<p>Click on the box to animate it</p>

<div class="box"></div>