ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 186

TRANSITION SHORTHAND AND MULTIPLE TRANSITIONS
Before moving on, you need to know about a couple more small but useful tech-
niques. You can use the transition shorthand property to take the place of the
other shorthand values, which can save you a lot of lines of code, especially when
you have to write five different copies to include all the necessary browser prefixes:
transition-property: opacity;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 1s;
These four properties can be represented by the following single shorthand
property:
transition: opacity 3s ease-in 1s;
In addition, if you want to specify multiple different transitions on the same
ruleset, you can list them all on the same property separated by commas. This
works for shorthand and longhand:
transition: opacity 3s ease-in 1s, height 4s linear;
transition-property: opacity, height;
Yo u m u s t s p e c i f y a t l e a s t t r a n s i t i o n p r o p e r t i e s a n d d u r a t i o n s f o r a n y t h i n g t o
animate; the other values are optional. If you don't specify a delay, the default is
0s , and if you don't specify a transition timing function, the default is ease .
If you specify multiple longhand properties, those different properties are
looped through to make sure all transitions are assigned a value for each property.
Let's look at another example:
transition-property: opacity, height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;