transition-delay

The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.
 
A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: red;
                transition-property: width;
                transition-duration: 5s;
                transition-delay: 2s;
                /* Firefox 4 */
                -moz-transition-property: width;
                -moz-transition-duration: 5s;
                -moz-transition-delay: 2s;
                /* Safari and Chrome */
                -webkit-transition-property: width;
                -webkit-transition-duration: 5s;
                -webkit-transition-delay: 2s;
                /* Opera */
                -o-transition-property: width;
                -o-transition-duration: 5s;
                -o-transition-delay: 2s;
            }
            
            div:hover {
                width: 300px;
            }
        </style>
    </head>
    <body>
        <p>
            <b>Note:</b>
            This example does not work in Internet Explorer.
        </p>
        <div>
        </div>
        <p>
            Hover over the div element above, to see the transition effect.
        </p>
        <p>
            <b>Note:</b>
            The transition effect will wait 2 seconds before starting.
        </p>
    </body>
</html>