<div class="box1">BOX.1</div>
body {
  padding: 64px;
}

.box1 {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  transition-property: transform, background;
  transition-duration: 2s; 
  transition-timing-function: ease-in-out;
}

.box1:hover {
  transform: translate(150px);
  background: pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.