transition-delay property
The transition-delay property sets
a delay before starting a smooth
transition.
Syntax
selector {
transition-delay: 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 - nothing will
happen for 3 seconds (there is a delay
of 3s), and then it will smoothly change
its width in 2 seconds. If you then
remove the mouse - then again nothing will
happen for 3 seconds, and then the
width will smoothly decrease to the
original value:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Example
Hover your mouse over the block - it will
first change its width in 2 seconds,
and then change its height in 4
seconds. The properties will change
sequentially, since the height is set to
3 seconds (the width change time). If
you remove the mouse, the changes will occur
in the reverse order: first the width will
decrease, and then the height will decrease:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}
:
See also
-
the
transition-propertyproperty
that specifies a property name for a smooth transition -
the
transition-durationproperty
that sets a duration of 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