Taquigrafía de transición CSS con múltiples propiedades?

Parece que no puedo encontrar la sintaxis correcta para la taquigrafía de transición CSS con múltiples propiedades. Esto no hace nada:

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

Agrego la clase show con javascript. El elemento se vuelve más alto y visible, simplemente no hace la transición. Pruebas en los últimos Chrome, FF y Safari.

¿Qué estoy haciendo mal?

EDITAR: Solo para que quede claro, estoy buscando la versión abreviada para reducir mi CSS. Está lo suficientemente hinchado con todos los prefijos de proveedor. También amplió el código de ejemplo.

Sintaxis:

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

Tenga en cuenta que la duración debe venir antes de la demora, si se especifica esta última.

Transiciones individuales combinadas en declaraciones abreviadas:

-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 simplemente haga la transición a todos:

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

Aquí hay un ejemplo sencillo . Aquí hay otro con la propiedad de retraso .

Editar: anteriormente enumerados aquí estaban las compatibilidades y los problemas conocidos relacionados transition. Eliminado para facilitar la lectura.

En pocas palabras: solo úsalo. La naturaleza de esta propiedad es inigualable para todas las aplicaciones y la compatibilidad ahora está muy por encima del 94% a nivel mundial.

Si todavía quiere estar seguro, consulte http://caniuse.com/css-transitions

Si tiene varias propiedades específicas que desea hacer la transición de la misma manera (porque también tiene algunas propiedades que específicamente no desea hacer la transición, por ejemplo opacity), otra opción es hacer algo como esto (se omiten los prefijos por brevedad):

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

La segunda declaración anula la alldeclaración de taquigrafía que se encuentra arriba y genera (ocasionalmente) un código más 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>

Manifestación

Yo que trabajo con esto:

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

Al tener el retraso de .5s en la transición de la propiedad de opacidad, el elemento será completamente transparente (y, por lo tanto, invisible) todo el tiempo que su altura esté en transición. Entonces, lo único que realmente verá es el cambio de opacidad. Entonces obtendrá el mismo efecto que dejar la propiedad de altura fuera de la transición:

"transición: opacidad .5s .5s;"

¿Es eso lo que quieres? Si no es así, y desea ver la transición de altura, no puede tener una opacidad de cero durante todo el tiempo que está en transición.

Esto me ayudó a comprender / simplificar, solo lo que necesitaba animar:

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

~ Esto se aplica a todas las propiedades de transición (duración, función de sincronización de transición, etc.) dentro de la clase '.base'

Creo que funciona con esto:

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