<div id="myDiv" style="left: 0px;"></div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);

html,body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg,  #EA5C54  0%,#bb6dec 100%);
}

#myDiv {
  height: 100px;
  width: 100px;
  background-color: darken(#f09, 30%);
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translate(0, -50%);
}
const myDiv = document.getElementById('myDiv')

myDiv.addEventListener('click', () => {
  setTimeout(function fn() {
    
    if(parseInt(myDiv.style.left) <= 200) {
      setTimeout(fn, 16)
    } else {
      return false
    }
    
    myDiv.style.left = parseInt(myDiv.style.left) + 5 + 'px'
    
  }, 16)
}, false)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.