HTML and CSS Reference
In-Depth Information
As you can see, element one drops quickly and expands slowly,
whereas element two expands quickly and drops slowly. The markup is
two
<div>
elements inside a
<section>
with this
CSS
applied to it:
section div {
position: absolute;
top: 0px;
transition-duration: 10s, 20s;
transition-property: top, transform;
}
section div:nth-child(2) {
left: 200px;
transition-property: transform, top;
}
section:hover div {
top: 280px;
transform: scale(1.5);
}
Transition delay
You don't have to start a transition immediately after whatever action
initiated it. The
transition-delay
property allows you to specify a wait
before a transition starts. In the following screenshots, element two
