#cssref <timing-function> | Embed

<div class="container">
  <p>
    The following has its transition function set to <code>steps(6, start)</code>.
  </p>
  <div class="el el-1"></div>
  <p>
    The following has its transition function set to <code>steps(6, end)</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: 50px;
  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 steps(6, start);
  transition: left 3s steps(6, start);
}

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

.el-2 {
  -webkit-transition: left 3s steps(6, end);
  transition: left 3s steps(6, end);
}