/* Attach transition instructions - Long version */
a.foo {
  background: #000;
  -webkit-transition-property: background
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0.5s;

  -webkit-transition: background 0.3s ease 0.5s; /* Can replace last 4 lines above */
  -webkit-transition: all 0.3s ease 0.5s; /* Transitioning all possible properties (color and backgrind in this case)*/

  transition: background 0.3s ease 0.5s; /* Let's put this here since we hope one day transition will be standard */
}

/* Attach transition instructions - Short version (showing 2 properties) */
a.foo {
  background: #000;
  -webkit-transition: background 0.3s ease 0.5s, color 0.2s linear;
}

/* Trigger the transition by hover or focus */
a.foo:hover, a.foo:focus, a.foo:active {
  background: #CCC;
  color: #678;
}

The transition instructions are attached to the normal state and therefore declared only once, then triggered on for eg. hover.

CSS3 Transition

CSS3

CSS