Delaying the Transition

Going back to our example, transitions can be delayed from
the moment the trigger happens on screen. For example, let’s
say we wanted the background transition to happen half a
second after the link is hovered over. We can do that using the
transition-delay property.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.5s;
}
a.foo:hover {
background: #690;
}