2D Transforms and Transitions - Beginning CSS3 - page 454

To apply different values to each property, use multiple shorthand definitions separated by commas.
For example, the #box1 style in reverse_sequence.html can be rewritten like this (the code is in transition.html):

#box1 {
width: 100px;
height: 100px;
background-color: #F00;
margin: 10px;
transition: background-color 1s 2s,
width 1s 1s,
height 1s;

}

This defines a one-second transition delayed by two seconds for background-color , a one-second transition
delayed by one second for width , and a one-second transition executed immediately for height .

■ Note it's not necessary to put each shorthand definition on a separate line, but it makes the style easier to read.

Using CSS Transitions with Images
After all that theory, let's take a look at some practical examples of using CSS transforms and transitions.

Creating a Rollover Image Without JavaScript
A rollover image reveals a different image when you hover over it. You can create a variation of this technique
using a combination of CSS positioning, a transition, and the opacity property, which is described in the sidebar
“Opacity and Alpha Transparency.”

OpacItY aND aLpha traNSpareNcY

Chapter 3 described how to create semitransparent colors with the rgba() and hsla() color formats, which
take as their fourth value a number representing the degree of alpha transparency. The number must be in
the range 0-1, with 0 representing fully transparent and 1 fully opaque.

The opacity property also controls the degree of transparency, but it affects the whole element. it takes a
single value in the same range and with exactly the same meaning as rgba() and hsla() .

To demonstrate the effect, opacity.html sets the background color and border of one <div> in rgba() format
with 30% alpha transparency. Another <div> has opacity set to the same amount like this:

#alpha {
background: rgba(255,255,255, 0.3);
border-color: rgba(217,79,17,0.3);
}
#opacity {
opacity: .3;
}