Stenografia di transizione CSS con più proprietà?

Non riesco a trovare la sintassi corretta per la scorciatoia di transizione CSS con più proprietà. Questo non fa nulla:

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

Aggiungo la classe show con javascript. L'elemento diventa più alto e visibile, semplicemente non passa. Test negli ultimi Chrome, FF e Safari.

Che cosa sto facendo di sbagliato?

EDIT: Giusto per essere chiari, sto cercando la versione abbreviata per ridimensionare il mio CSS. È abbastanza gonfio con tutti i prefissi del fornitore. Inoltre ha ampliato il codice di esempio.

Sintassi:

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

Si noti che la durata deve precedere il ritardo, se quest'ultimo è specificato.

Transizioni individuali combinate in dichiarazioni stenografiche:

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

O semplicemente trasferiscili tutti:

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

Ecco un esempio semplice . Eccone un altro con la proprietà delay .

Modifica: precedentemente elencati qui erano le compatibilità e problemi noti riguardanti transition. Rimosso per leggibilità.

In conclusione: basta usarlo. La natura di questa proprietà è ininterrotta per tutte le applicazioni e la compatibilità è ora ben superiore al 94% a livello globale.

Se vuoi ancora essere sicuro, fai riferimento a http://caniuse.com/css-transitions

Se hai diverse proprietà specifiche che vuoi trasferire allo stesso modo (perché hai anche alcune proprietà che hai nello specifico non vuoi trasferire, diciamo opacity), un'altra opzione è fare qualcosa del genere (prefissi omessi per brevità):

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

La seconda dichiarazione sovrascrive la alldichiarazione abbreviata sopra di essa e rende (occasionalmente) un codice più conciso.

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

dimostrazione

Io che lavoro con questo:

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

Avendo il ritardo di 0,5 sulla transizione della proprietà di opacità, l'elemento sarà completamente trasparente (e quindi invisibile) per tutto il tempo in cui la sua altezza sta passando. Quindi l'unica cosa che vedrai in realtà è che l'opacità sta cambiando. Quindi otterrai lo stesso effetto di lasciare la proprietà height fuori dalla transizione:

"transizione: opacità .5s .5s;"

È quello che stai cercando? In caso contrario, e vuoi vedere la transizione in altezza, non puoi avere un'opacità pari a zero per tutto il tempo in cui sta passando.

Questo mi ha aiutato a capire / ottimizzare, solo ciò di cui avevo bisogno per animare:

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

~ Questo vale per tutte le proprietà di transizione (durata, funzione di temporizzazione della transizione, ecc.) All'interno della classe '.base'

Penso che funzioni con questo:

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