HTML and CSS Reference
In-Depth Information
improve usability by making interfaces more realistic and can be used
to clarify relationships.
One of the key attractions of the jQuery JavaScript library for
designers is that it makes it easy to create these small animations. CSS
transitions are intended to remove the need for JavaScript to apply
small visual effects, and in this section you'll learn all about them.
One simple way to apply transitions is
with a dynamic pseudo-class like
:hover
. In the following sets of screen-
shots, three of the transformation
examples from the previous section
have been applied to the
:hover
state
of a containing
<div>
with a transition
lasting 10 seconds. Instead of flipping
from one state to the other, the change
happens gradually. If you look care-
fully, the fly-like speck on each
screenshot is the mouse pointer.
Full
Partial
-
7.0
-
4.0
-
10.0
-
10.5
-
3.1
This example is from ch09/transforms-5.html with a 10-second
transition.
This example is from ch09/transforms-6.html with a 10-second
transition.
