<div class="sample4">
  <div class="box ease"></div>
  <div class="box linear"></div>
  <div class="box ease-in"></div>
  <div class="box ease-out"></div>
  <div class="box ease-in-out"></div>
</div>
.sample4 {
  position: relative;
}

.box {
  position: absolute;
  left: 0;
  background-color: #6d35ef;
  width: 100px;
  height: 10px;
  transition-duration: 3s;
  border-radius: 5px;
}

.ease {
  transition-timing-function: ease;
  top: 0;
}

.linear {
  transition-timing-function: linear;
  top: 20px;
}

.ease-in {
  transition-timing-function: ease-in;
  top: 40px;
}

.ease-out {
  transition-timing-function: ease-out;
  top: 60px;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
  top: 80px;
}

.sample4:hover .box {
  left: 300px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.