transition-duration
CSS transition-duration Property
The transition-duration property defines how long the transition animation should take.
The transition-duration property is one of the CSS3 properties.
One or multiple comma-separated durations can be specified.
Several durations may be specified, and each of these durations will be applied to the matching property defined by the CSS transition-property. This property acts as a master list, and in the cases when there are fewer durations than in the master list, the list of durations is repeated. If there are more specified durations, the list is shortened.
The default value is 0s, which means that the transition will not have any effect.
For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.
| 类目 | 类目 |
|---|---|
| Initial Value | 0s |
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.transitionDuration = “3s”; |
Syntax
Syntax
transition-duration: time | initial | inherit;
Example of the transition-duration property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #666;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
div:hover {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition-duration property example</h2>
<div></div>
</body>
</html>
Example of the transition-duration property with the “time” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.example {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
position: relative;
-webkit-transition-property: background-color, left;
-moz-transition-property: background-color, left;
-o-transition-property: background-color, left;
transition-property: background-color, left;
-webkit-transition-timing-function: linear, linear;
-moz-transition-timing-function: linear, linear;
-o-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
-webkit-transition-duration: .3s, .3s;
-moz-transition-duration: .3s, .3s;
-o-transition-duration: .3s, .3s;
transition-duration: .3s, .3s;
}
.el2 {
-webkit-transition-duration: .6s, .6s;
-moz-transition-duration: .6s, .6s;
-o-transition-duration: .6s, .6s;
transition-duration: .6s, .6s;
}
.el3 {
-webkit-transition-duration: 1s, 1s;
-moz-transition-duration: 1s, 1s;
-o-transition-duration: 1s, 1s;
transition-duration: 1s, 1s;
}
.el4 {
-webkit-transition-duration: 2s, 2s;
-moz-transition-duration: 2s, 2s;
-o-transition-duration: 2s, 2s;
transition-duration: 2s, 2s;
}
</style>
</head>
<body>
<h2>Transition-duration property example</h2>
<div class="container">
<p>
<code>transition-duration: .3s, .3s;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-duration: .6s, .6s;</code>
</p>
<div class="example el2"></div>
<p>
<code>transition-duration: 1s, 1s;</code>
</p>
<div class="example el3"></div>
<p>
<code>transition-duration: 2s, 2s;</code>
</p>
<div class="example el4"></div>
</div>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| time | Specifies how many seconds or milliseconds a transition effect should complete. The default value is 0s. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |