<div class="container">
  <p>
    Hover over the container to see the blocks transitioning.
  </p>
  <p>
    The following has its transition function set to <code>cubic-bezier(.18,1.31,.82,.15)</code>. You can see that the Y coordinate of the first control point is > 1, which is allowed.
  </p>
  <div class="el el-1"></div>
  <p>
    The next one has its transition function set to <code>cubic-bezier(.82,.1,.14,1.12)</code>.
  </p>
  <div class="el el-2"></div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 700px;
  margin: 40px auto;
  border: 1px solid #ddd;
  padding: 1em 2em;
  background-color: white;
}

.el,
.el-2 {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #006699;
  position: relative;
  left: 0;
}

.el {
  -webkit-transition: left 3s cubic-bezier(.18, 1.31, .82, .15);
  transition: left 3s cubic-bezier(.18, 1.31, .82, .15);
}

.container:hover .el {
  left: 200px;
}

.el-2 {
  -webkit-transition: left 3s cubic-bezier(.82, .1, .14, 1.12);
  transition: left 3s cubic-bezier(.82, .1, .14, 1.12);
}