The transition-duration property
The transition-duration property sets
a smooth transition duration.
Syntax
cssselector {
transition-duration: duration in s or ms;
}
Values
| Value | Description |
|---|---|
s |
Specifies a time in seconds (for example
3s). You can set fractional values,
for example, 0.5s - half a second.
|
ms |
Specifies a time in milliseconds (for example
3ms). One second is 1000
milliseconds.
|
Default value: 0s.
Example
Hover your mouse over the block - it
will smoothly change its width in
2 seconds.
html<div id="elem"></div>css#elem {
transition-duration: 2s;
transition-property: width;
border: 1px solid black;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
Результат:
See also
-
the
transition-propertyproperty
that specifies a property name for a smooth transition -
the
transition-delayproperty
that sets a delay before a smooth transition -
the
transition-timing-functionproperty
that specifies a timing function for a smooth transition -
the
transitionproperty
that is a shorthand for a smooth transition -
the
animationproperty
that can be used to create animation