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>
            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;
            This example does not work in Internet Explorer.
            Hover over the div element above, to see the transition effect.