166 Chapter 14
The difference between transitions and animations is that the former
are implicit and the latter are declared. That means transitions only take effect
when the property they are applied to changes value, whereas animations
are explicitly executed when applied to an element.
I’ll start this chapter with a look at the Transitions Module, as it is the
simpler of the two modules; however, both modules have a lot of syntax in
common, so much of what you learn from one can be directly applied to
the other.Transitions
CSS2.1 has no in-between states: When the value of a property changes, the
change is abrupt. Consider an element with a width of 10em, which changes
to a width of 20em when you hover your mouse over it. You’ll notice the ele-
ment does not progress smoothly between the two states but jumps instantly
between them. CSS3 changes this behavior with the introduction of the
Transitions Module (http://www.w3.org/TR/css3-transitions/). In CSS, a
transition is an animation that moves a property between two states.
As I mentioned in the introduction to this chapter, transitions are an
implicit animation, which means they are triggered only when a new value is
set for a CSS property—this could be when new values are applied on hover
or through JavaScript manipulation. For a transition to occur, four condi-
tions must be in place: an initial value, an end value, the transition itself,
and a trigger.
Here’s an example of those four conditions in a simple transition (don’t
worry about the properties I’ve used just yet; I’ll explain everything in due
course):div {
background-color: black;
transition: background-color 2s;
}
div:hover { background-color: silver; }The div element provides the initial value (background-color: black) and
the transition (background-color 2s). The trigger is the :hover pseudo-class,
which sets the end value (silver) for the background-color property.
So here we have a div element with a black background that, when the
mouse is passed over it, transitions smoothly to silver. All transitions act in
reverse when the trigger is no longer active, so when the mouse is moved off
of the div, the background smoothly transitions back to black.
Now that you have a general idea of how transitions work, I’ll explore
each of the transition properties in turn.noTe The transition properties are implemented in all modern browsers, including mobile,
without vendor prefix. To cater to older versions of WebKit-based browsers, however—
especially Safari and versions previous to 4.4 of Android—you should also duplicate
your rules with the -webkit- prefix.