<div class="box">
  <p><strong>ease</strong> - медленное начало анимации, быстрая середина, медленный конец</p>
  <p><span class="ease"></span></p>
  <p><strong>linear</strong> - постоянная скорость анимации</p>
  <p><span class="linear"></span></p>
  <p><strong>ease-in</strong> - медленное начало анимации, быстрый конец</p>
  <p><span class="ease-in"></span></p>
  <p><strong>ease-out</strong> - быстрое начало анимации, медленный конец</p>
  <p><span class="ease-out"></span></p>
  <p><strong>ease-in-out</strong> - подобно ease, но с более выраженным ускорением/замедлением</p>
  <p><span class="ease-in-out"></span></p>
</div>

.box {
  font-family: sans-serif;
  font-size: 18px;
  padding-right: 30px;
}
.box span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: left;
  transition-duration: 1s;
}
.box:hover span {
  left: 100%;
}
p:nth-child(odd){
  margin-bottom: -0.5em;
}
p:nth-child(even){
  position: relative;
  height: 30px;
}
.ease {
  transition-timing-function: ease;
}
.linear {
  transition-timing-function: linear;
}
.ease-in {
  transition-timing-function: ease-in;
}
.ease-out {
  transition-timing-function: ease-out;
}
.ease-in-out {
  transition-timing-function: ease-in-out;
}