title: CSS transition shorthand with multiple properties?
body: <p>I can't seem to find the correct syntax for the CSS transition <strong>shorthand</strong> with multiple properties. This doesn't do anything:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>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.</p>