Edit in JSFiddle

Result
CSS
HTML

.wrap {
  width: 500px;
  border: 1px solid #ccc;
  margin-top: 1em;
  padding: 1em;
}

.wrap>div {
  position: relative;
  width: 100px;
  margin: 5px;
  padding: 5px;
  white-space: nowrap;
  
  left: 0px;
  height: 20px;
  background-color: pink;
  transition-property: all;
  transition-duration: 2s;
}

.wrap:hover>div {
  left: 380px;
}

.wrap .linear { transition-timing-function: linear; }
.wrap .ease { transition-timing-function: ease; }
.wrap .ease_in { transition-timing-function: ease-in; }
.wrap .ease_out { transition-timing-function: ease-out; }
.wrap .ease_in_out { transition-timing-function: ease-in-out; }
.wrap .cubic { transition-timing-function: cubic-bezier(1,0.2,1,0.5); }
.wrap .step1 { transition-timing-function: steps(4, start); }
.wrap .step2 { transition-timing-function: steps(4, end); }
.wrap .start { transition-timing-function: step-start; }
.wrap .end { transition-timing-function: step-end; }

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <h2>transition-timing-function 마우스를 오버하세요.</h2>
    <div class="wrap">
        <div class="linear">linear</div>
        <div class="ease">ease</div>
        <div class="ease_in">ease-in</div>
        <div class="ease_out">ease-out</div>
        <div class="ease_in_out">ease-in-out</div>
        <div class="cubic">cubic-bezier(1,0.2,1,0.5)</div>
        <div class="step1">steps(4,start)</div>
        <div class="step2">steps(4,end)</div>
        <div class="start">step-start</div>
        <div class="end">step-end</div>
    </div>
  </body>
</html>