Getting Fancy - Jump Start CSS - page 134

So, why are we putting the transition in the rule set that targets the links directly, rather than
on the :hover state? Well, we want the transition to occur when the user moves their mouse
over the links as well as when they move their mouse off. If we put the transition only on the
:hover state, then the transition will occur only when the user hovers over the links, not
when the user moves off. By putting the transition directly on the element itself, we ensure
that the transition occurs in both directions: hover-on and hover-off.
Let's continue by adding a transition to the text links in the “Latest Recipes” section:
.media a h2,
.media a p {
transition: color .3s linear;
}
.media a:hover h2, .media a:hover p {
color: #b32c1c;
}
The first declaration block is the example we just added, with two grouped selectors. The
second is included to demonstrate where the first example should be placed in our CSS file.
With this new rule set added, the color change on the text links in the .media blocks should
be gradual, rather than sudden.
Multiple Transitions on a Single Element
If we want to transition more than one property on a single element, we can't define multiple
transition properties like this:
.example {
transition: color .4s ease-out;
transition: width .7s linear;
}
When a browser sees the same property defined more than once on a single element, the first
instance of that property is ignored and only the second instance will have any effect.
So, to transition multiple properties on a single element, we have two choices. Firstly, we
can use the all keyword, mentioned earlier. This will transition all properties. Secondly, we