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

Parece que no puedo encontrar la syntax correcta para la taquigrafía de transición de 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 de demostración con javascript. El elemento se vuelve más alto y visible, simplemente no hace transición. Prueba en los últimos Chrome, FF y Safari.

¿Qué estoy haciendo mal?

EDITAR: Para ser claros, estoy buscando la versión abreviada para escalar mi CSS. Está lo suficientemente hinchado con todos los prefijos del vendedor. También expandió el código de ejemplo.

Sintaxis:

 transition:  ||  ||  ||  [, ...]; 

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

Transiciones individuales combinadas en declaraciones de taquigrafía:

 -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 transfiéralos 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 directo . Aquí hay otro con la propiedad de demora .


Editar: anteriormente enumerados aquí fueron las compatibilidades y problemas conocidos con respecto a la transition . Eliminado para facilitar la lectura.

En resumen, solo úsalo. La naturaleza de esta propiedad no se está rompiendo para todas las aplicaciones y la compatibilidad ahora está muy por encima del 94% a nivel mundial.

Si aún quieres estar seguro, consulta 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 transferir, por ejemplo, opacity ), otra opción es hacer algo como esto (prefijos omitidos por brevedad):

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

La segunda statement anula el all en la statement de taquigrafía que aparece arriba y hace que (ocasionalmente) el código sea más conciso.

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) durante todo el tiempo que su altura está en transición. Entonces, lo único que realmente verá es el cambio de opacidad. Por lo tanto, 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, y quiere ver la transición de altura, no puede tener una opacidad de cero durante todo el tiempo que está en transición.

Las transiciones CSS se controlan usando la propiedad de transición taquigráfica. Esta es la mejor forma de configurar las transiciones, ya que es más fácil evitar que las longitudes de la lista de parámetros no estén sincronizadas, lo que puede ser muy frustrante al tener que pasar mucho tiempo depurando el CSS.

Puede controlar los componentes individuales de la transición con las siguientes subpropiedades:

  1. propiedad de transición
  2. duración de la transición
  3. transition-timing-function
  4. transición-retraso

La syntax abreviada de CSS se escribe de la siguiente manera:

div { transition: ; }

Nota: Transition-delay sin embargo es una propiedad opcional.

Creo que funciona con esto:

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