#cssref <timing-function> (3) | Embed

<div class="container">
  <p>
    Hover over the container to see the blocks transition.
  </p>
  <p>
    The following has its transition function set to <code>ease-in</code>.
  </p>
  <div class="el el-1"></div>
  <p>
    The following has its transition function set to <code>linear</code>.
  </p>
  <div class="el el-2"></div>
  <p>
    The following has its transition function set to <code>step-start</code>.
  </p>
  <div class="el el-3"></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: 50px;
  background-color: white;
}

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

.el-1 {
  -webkit-transition: left 3s ease-in;
  transition: left 3s ease-in;
}

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

.el-2 {
  -webkit-transition: left 3s linear;
  transition: left 3s linear;
}

.el-3 {
  -webkit-transition: left 3s step-start;
  transition: left 3s step-start;
}