CSS-Übergangskurzschrift mit mehreren Eigenschaften?

Question

Ich kann die korrekte Syntax für den CSS-Übergang nicht finden Kurzschrift mit mehreren Eigenschaften. Das bringt nichts:

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

Ich füge die Klasse show mit javascript hinzu. Das Element wird höher und sichtbar, es gibt nur keinen Übergang. Testen in den neuesten Chrome, FF und Safari.

Was mache ich falsch?

EDIT: Nur um klar zu sein, ich bin auf der Suche nach der Shorthand-Version, um mein CSS zu verkleinern. Es ist aufgebläht genug mit all den Anbieter-Präfixen. Auch erweitert den Beispielcode.

Answer 1

Das half mir, nur das zu verstehen und zu straffen, was ich für die Animation brauchte:

// 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
  }
}

~ Dies gilt für alle Übergangseigenschaften (Dauer, Übergangszeitfunktion usw.) innerhalb der Klasse '.base'.

Answer 2

Ich denke, dass dies funktionieren sollte:

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