CSS-overgangsafkorting met meerdere eigenschappen?

Ik kan de juiste syntaxis niet vinden voor de CSS-overgang stenomet meerdere eigenschappen. Dit doet niets:

.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;
}

Ik voeg de showklasse toe met javascript. Het element wordt hoger en zichtbaar, het gaat gewoon niet over. Testen in de nieuwste Chrome, FF en Safari.

Wat doe ik verkeerd?

EDIT: voor alle duidelijkheid, ik ben op zoek naar de verkorte versie om mijn CSS te verkleinen. Het is al opgeblazen genoeg met alle voorvoegsels van leveranciers. Ook de voorbeeldcode uitgebreid.

Antwoord 1, autoriteit 100%

Syntaxis:

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

Houd er rekening mee dat de duur vóór de vertraging moet komen, als deze laatste is gespecificeerd.

Individuele overgangen gecombineerd in steno-declaraties:

-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;

Of zet ze gewoon allemaal over:

-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;

Hier is een duidelijk voorbeeld. Hier is er nog een met de eigenschap delay.

Bewerken:eerder hier vermeld waren de compatibiliteit en bekende problemen met betrekking tot transition. Verwijderd voor leesbaarheid.

Kortom: gebruik het gewoon. De aard van deze eigenschap is onveranderlijk voor alle toepassingen en de compatibiliteit ligt nu wereldwijd ruim boven de 94%.

Als je het toch zeker wilt weten, ga dan naar http://caniuse.com/css-transitions

Antwoord 2, autoriteit 59%

Als je meerdere specifieke eigenschappen hebt die je op dezelfde manier wilt overzetten (omdat je ook enkele eigenschappen hebt die je specifiek nietwilt overzetten, zeg dan opacity), is een andere optie om zoiets als dit te doen (voorvoegsels weggelaten voor de beknoptheid):

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

De tweede declaratie overschrijft de allin de verkorte declaratie erboven en zorgt voor (soms) beknoptere 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>

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

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}
.base {
  max-width: 0vw;
  opacity: 0;
  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;
  &:hover {
    max-width: 100vw;
    opacity: 1;
    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}