CSS transition shorthand with multiple properties?

Question

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything:

.element {   -webkit-transition: height .5s, opacity .5s .5s;      -moz-transition: height .5s, opacity .5s .5s;       -ms-transition: height .5s, opacity .5s .5s;           transition: height .5s, opacity .5s .5s;   height: 0;   opacity: 0;   overflow: 0; } .element.show {   height: 200px;   opacity: 1; } 

I add the show class with javascript. The element becomes higher and visible, it just doesn't transition. Testing in latest Chrome, FF and Safari.

What am I doing wrong?

EDIT: Just to be clear, I'm looking for the shorthand version to scale my CSS down. It's bloated enough with all the vendor prefixes. Also expanded the example code.

Answer 1

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