The transition-delay property defines when the transition will start and is expressed in milliseconds (ms) or seconds (s). (The default value is 0.)

Normally, a transition begins immediately since the the default is 0. To delay the add include the number of milliseconds (ms) or seconds (s) to delay the transition:


-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;

Negative Delays
Giving a negative time delay that is less than the duration of the entire transition will cause it to start immediately, but it will start partway through the animation.

For example, if you have a delay of -500ms on a 2s transition, the transition will start a quarter of the way through, and will last 1.5 seconds. It will create some interesting effects.
Related Tutorial