HTML and CSS Reference
In-Depth Information
therefore, I've forced the form to remain onscreen by setting the
left
property to
0
with
form.style.left = “0rem”
.
If the Modernizr test isn't true, the browser doesn't support CSS Animations
and/or 3D transforms; therefore, I want different styling to occur when the Submit
button is clicked. To allow nonsupporting browsers to see the “Thank You” mes-
sage, I used
back.style.zIndex = “5”;
to set the
z-index
of the #back
<div>
to
5
,
making it appear above everything else in the stacking order when the Submit
button is clicked.
Figure 5.26
shows the three states I'm animating in between.
I've also used some simple transitions to make the help messages appear when
the form labels are hovered over/focused on:
FIGURE 5.26
The three differ-
ent states we are animating.
.extended-info {
.
opacity: 0;
transition: 1.5s all;
}
div label:hover .extended-info,div label:focus .extended-info {
: ;
}
