Transition duration property (transition-duration)

The transition-duration property sets the duration of a transition and takes time values in seconds (s) or milliseconds (ms).

Syntax:

selector {

transition-duration: time | initial | inherit;

}

Values:

Possible values for transition-duration property are:

time; Specifies the duration of a transitions in seconds or miliseconds, with 0 being default.
initial, inherit

The default value is 0, which means that in reality there will be no effect applied to the element. Besides seconds or milliseconds, other values may be initial or inherit.

Example

The transition-duration property example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; color:#eee; 
    background-color:#e3333e;
  }
div {
    width: 300px; height:80px; padding:10px;
    font-size:smaller; line-height:1.2em; color:#e3333e;
    background: lightblue;
    border:1px inset lightblue;
    transition-duration: 400ms;
        -webkit-transition-duration: 400ms; /* Safari, Chrome */
        -moz-transition-property: 400ms; /* Firefox */
    transition-property: font-size;
        -webkit-transition-property:font-size; /* Safari, Chrome */
        -moz-transition-property: font-size; /* Firefox */
}
div:hover {
    font-size:larger;
}
</style>
</head>
<body>

<h3>A simple DIV container with transition-duration property:</h3>

<div>Hover over the box and to see the transition effect in action.</div>

</body>
</html>

›› go to examples ››

Transition duration property (transition-duration)

Syntax:

Values:

Example

The transition-duration property example:

Comments

About

Contact

Get Connected