<div class="box"></div>
body{
  width: 150px;
  margin: 1% auto;
}

/* div with background */
.box {
  background:blue;
  width: 150px;
  height: 150px;
  color:#fff;

  transition: transform 1s;
}

  /* 
  transform: translate 
  */
.box:hover{
    transform: translateX(20px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.