HTML and CSS Reference
In-Depth Information
I set a default height on the
<div>
s for the benefit of browsers that don't sup-
port the JavaScript I've used (they probably won't support the transitions anyway,
but hey), a default width of 25%, some shadowing to make the bars look good,
and most important, I declared a transition of the
width
property over 3 seconds.
Next, I set the nested
<div>
widths to 90%, only when their wrapper
<div>
is
hovered over. Note that it is very powerful to use pseudo-classes in descendant/
child selector chains like this:
#wrapper:hover div, #wrapper:focus div {
width: 100%;
}
Finally, I set each separate nested
<div>
to have a different
background-color
and
transition-timing-function
, for example:
#timing1 {
background-color: blue;
transition-timing-function: linear;
}
#timing2 {
background-color: red;
transition-timing-function: ease;
}
TIP:
Notice that I've used a negative number for the Y-position of the first
control handle in the cubic Bezier example:
cubic-bezier(0.25,-0.5,0.75,1)
. This
causes a “bounce effect” where the transition goes below its beginning value and then
comes back up again and on to the final value. This technique can be very useful for some
effects, such as a toy boat bobbing up and down in the water after being dropped.
