HTML and CSS Reference
In-Depth Information
But you can put
transition-duration
on the
hover
state. In this case, it
will only apply as the element enters the
hover
state. When the element
leaves
hover
, it immediately snaps back to the starting position—a
duration of zero.
This is the critical bit of code from listing ch09/transitions-4.html:
div:hover div { transition-duration: 10s; }
You can also put
transition-duration
on both states. In the next exam-
ple, the transition lasts 10 seconds as it enters the
hover
state and 5 sec-
onds as it exits.
The duration for exiting the
hover
state is specified on the rule without
the
:hover
:
div div { transition-duration: 5s; }
div:hover div { transition-duration: 10s; }
See the complete example in listing ch09/transitions-5.html.
