Abreviatura de transición CSS con múltiples propiedades?

Parece que no puedo encontrar la sintaxis correcta para la transición CSS abreviación 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 transición. Pruebas en la última Chrome, FF y Safari.

¿Qué estoy haciendo mal?

EDITAR: Solo para ser claro, estoy buscando la versión abreviada para escalar mi CSS hacia abajo. Está bastante hinchado con todos los prefijos de los vendedores. También expandió el código de ejemplo.

Author: netpoetica, 2012-03-12
Source

6 answers

Sintaxis: 

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

Tenga en cuenta que la duración debe venir antes del retraso, si se especifica este último.

Transiciones individuales combinadas en declaraciones taquigráficas: 

-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 la transición de todos ellos: 

-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í está un ejemplo sencillo. Aquí hay otro con la propiedad delay.

Edit: anteriormente se listaron aquí las compatibilidades y los problemas conocidos con respecto a transition. Eliminado para legibilidad.

Conclusión: solo úsalo. La naturaleza de esta propiedad no se rompe 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

 566
Author: Rémi Breton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-27 17:56:23

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 all en la declaración abreviada anterior y hace que (ocasionalmente) el código sea más conciso.

Demo

 301
Author: Jason,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-14 22:09:18

Yo que trabajo con esto :

element{
   transition : height 3s ease-out, width 5s ease-in;
}
 3
Author: AhbapAldirmaz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-19 11:45:04

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

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

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

 2
Author: J.B.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-03 22:13:36

Las transiciones CSS se controlan usando la propiedad shorthand transition. Esta es la mejor manera de configurar las transiciones, ya que hace que sea más fácil evitar que las longitudes de la lista de parámetros estén fuera de sincronización, lo que puede ser muy frustrante tener que pasar mucho tiempo depurando el CSS.

Puede controlar los componentes individuales de la transición con lo siguiente sub-propiedades:

  1. transition-property
  2. transición-duración
  3. función de temporización de transición
  4. transición-retardo

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

div { transition: <property> <duration> <timing-function> <delay>; }

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

 0
Author: Tahir77667,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-20 18:44:55

Creo que trabajar con esto: 

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
 -3
Author: Thomas Lamothe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-05 16:28:27