CSS transition shorthand with multiple properties?

If you have several specific properties that you want to transition in the same way (because you also have some properties you specifically don't want to transition, say opacity), another option is to do something like this (prefixes omitted for brevity):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

The second declaration overrides the all in the shorthand declaration above it and makes for (occasionally) more concise code.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

Demo

I made it work with this:

.element {
   transition: height 3s ease-out, width 5s ease-in;
}

One important thing to note is that the CSS transition property itself is a shorthand - as mentioned in the MDN Web Docs :

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

The ideal use of this shorthand is to combine the various Constituent properties of a single transition. If this is used to combine multiple transitions, it will start to get clunky.

So when you have more than 2 transitions on the same element which different constituent properties, it becomes easier to write them individually instead of using the transition shorthand. For example:

This is the shorthand version(Option 1) of multiple transitions on one element:

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

As you can see, this gets clunky and a little bit harder to visualize.
The same CSS can be applied like this(Option 2):

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

Of course, ultimately it all just comes down to your preference of typing and maintaining your source code. But I personally prefer the 2nd option.

TIP:

Additional benefit of using this is, if one of the Constituent properties is same for all transitions, you don't need to mention it multiple times. For example, in the above example, if the transition-duration was the same(0.5s) for all, you write it like this:

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

Syntax:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Note that the duration must come before the delay, if the latter is specified.

Individual transitions combined in shorthand declarations:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Or just transition them all:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Here is a straightforward example. Here is another one with the delay property.

Edit: previously listed here were the compatibilities and known issues regarding transition. Removed for readability.

Bottom-line: just use it. The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally.

If you still want to be sure, refer to http://caniuse.com/css-transitions