transition-duration

The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: black;
                transition-property: width;
                transition-duration: 5s;
                /* Firefox 4 */
                -moz-transition-property: width;
                -moz-transition-duration: 5s;
                /* Safari and Chrome */
                -webkit-transition-property: width;
                -webkit-transition-duration: 5s;
                /* Opera */
                -o-transition-property: width;
                -o-transition-duration: 5s;
            }
            
            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>
    </body>
</html>