<div class="container">
  <p>Hover over the container in each of the following cases to see the element's background color and left position offset transition.</p>
  <div class="wrapper">
    <p>
      The transition delay of the position is 0s, meaning that it will start immediately when you hover the container. The background color transition starts after the position transition ends. The value of the <code>transition-delay</code> for the background color is equal to the <code>transition-duration</code> of the position transition.
    </p>
    <div class="element element-1"></div>
  </div>
  <div class="wrapper">
    <p>
      The transition delay of the position is 0.6s, meaning that it will start 0.6s after you hover the container. The background color transition starts after the position transition ends. The value of the <code>transition-delay</code> for the background color is equal to the <code>transition-duration</code> of the position transition.
    </p>
    <div class="element element-2"></div>
  </div>
  <div class="wrapper">
    <p>
      The transition delay of the position is 2s, meaning that it will start 2s after you hover the container. The background color transition starts after the position transition ends. The value of the <code>transition-delay</code> for the background color is equal to the <code>transition-duration</code> of the position transition.
    </p>
    <div class="element element-3"></div>
  </div>
  <div class="wrapper">
    <p>
      The transition delay of the position is -1s, meaning that, when you hover the container, the element will be transitioned so that it appears as if it has been transitioning for 1s already. That is, it will appear as if it started transitioning 1s before you hover over the container. So you will see the element already halfway through its position animation (because the delay is equal to half the duration in this case). The background color transition starts after the position transition ends. The value of the <code>transition-delay</code> for the background color is equal to the <code>transition-duration</code> of the position transition.
    </p>
    <div class="element element-4"></div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
  padding: 1em;
}

.wrapper {
  border: 1px solid #aaa;
  padding: 30px;
  background-color: white;
  margin-bottom: 30px;
}

.element {
  padding: 20px;
  width: 30px;
  height: 30px;
  left: 0;
  background-color: #009966;
  position: relative;
  -webkit-transition-property: background-color, left;
  transition-property: background-color, left;
  -webkit-transition-duration: 1s, 2s;
  transition-duration: 1s, 2s;
  -webkit-transition-timing-function: ease, ease-out;
  transition-timing-function: ease, ease-out;
}

.wrapper:hover .element {
  left: 250px;
  background-color: purple;
}

.element-1 {
  -webkit-transition-delay: 2s, 0s;
  transition-delay: 2s, 0s;
}

.element-2 {
  -webkit-transition-delay: 2s, .6s;
  transition-delay: 2s, .6s;
}

.element-3 {
  -webkit-transition-delay: 2s, 2s;
  transition-delay: 2s, 2s;
}

.element-4 {
  -webkit-transition-delay: 2s, -1s;
  transition-delay: 2s, -1s;
}