CSS-Übergangskürzel mit mehreren Eigenschaften?

Ich kann anscheinend nicht die richtige Syntax für die Kurzform des CSS-Übergangs mit mehreren Eigenschaften finden. Das macht 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 Showklasse mit Javascript hinzu. Das Element wird höher und sichtbar, es geht einfach nicht über. Testen in den neuesten Versionen von Chrome, FF und Safari.

Was mache ich falsch?

EDIT: Um ganz klar zu sein, ich suche nach der Kurzversion, um mein CSS zu verkleinern. Es ist mit allen Herstellerpräfixen aufgebläht genug. Erweitert auch den Beispielcode.

Syntax:

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

Beachten Sie, dass die Dauer vor der Verzögerung liegen muss, wenn letztere angegeben ist.

Einzelne Übergänge kombiniert in Kurzdeklarationen:

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

Oder einfach alle umstellen:

-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 ist ein einfaches Beispiel . Hier ist eine andere mit der Verzögerungseigenschaft .

Bearbeiten: Zuvor hier aufgelistet waren die Kompatibilitäten und bekannten Probleme in Bezug auf transition. Zur besseren Lesbarkeit entfernt.

Fazit: Verwenden Sie es einfach. Die Art dieser Eigenschaft ist für alle Anwendungen nicht störend und die Kompatibilität liegt jetzt weltweit weit über 94%.

Wenn Sie dennoch sicher sein möchten, lesen Sie http://caniuse.com/css-transitions

Wenn Sie mehrere spezifische Eigenschaften haben, die Sie auf die gleiche Weise übergehen möchten (weil Sie auch einige Eigenschaften haben, die Sie speziell nicht übergehen möchten opacity), können Sie auch Folgendes tun (der Kürze halber werden Präfixe weggelassen):

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

Die zweite Deklaration überschreibt die allin der darüber liegenden Kurzschrift stehende Erklärung und sorgt für (gelegentlich) präziseren 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

Ich arbeite damit:

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

Durch die Verzögerung von 0,5 Sekunden beim Übergang der Opazitätseigenschaft ist das Element während des gesamten Übergangs seiner Höhe vollständig transparent (und somit unsichtbar). Das einzige, was Sie tatsächlich sehen werden, ist die Änderung der Deckkraft. Sie erhalten also den gleichen Effekt, als würden Sie die Eigenschaft height aus dem Übergang herauslassen:

"Übergang: Opazität .5s .5s;"

Wollen Sie das? Wenn nicht, und Sie möchten den Höhenübergang sehen, können Sie während der gesamten Übergangszeit keine Deckkraft von Null haben.

Dies half mir zu verstehen / zu rationalisieren, nur was ich zum Animieren 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'

Ich denke das funktioniert damit:

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