¿Cómo tener múltiples transiciones de CSS en un elemento?

Es una pregunta bastante sencilla, pero no puedo encontrar una documentación muy buena sobre las propiedades de transición de CSS. Aquí está el fragmento de CSS:

.nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear; -webkit-transition: text-shadow .2s linear; -moz-transition: text-shadow .2s linear; -o-transition: text-shadow .2s linear; transition: text-shadow .2s linear; } .nav a:hover { color:#F7931E; text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15); } 

Como puede ver, las propiedades de transición se sobrescriben entre sí. Tal como está, la sombra de texto animará, pero no el color. ¿Cómo hago para que ambos se animen simultáneamente? Gracias por cualquier respuesta.

Las propiedades de transición están delimitadas por comas en todos los navegadores que admiten transiciones:

 .nav a { transition: color .2s, text-shadow .2s; } 

ease es la función de temporización predeterminada, por lo que no tiene que especificarla. Si realmente quieres linear , deberás especificarlo:

 transition: color .2s linear, text-shadow .2s linear; 

Esto comienza a ser repetitivo, por lo que si va a utilizar las mismas funciones de tiempo y tiempo en múltiples propiedades, es mejor seguir adelante y usar las diversas propiedades de transition-* en lugar de la taquigrafía:

 transition-property: color, text-shadow; transition-duration: .2s; transition-timing-function: linear; 

También puede simplemente significativamente con:

 .nav a { -webkit-transition: all .2s; } 

Algo como lo siguiente permitirá múltiples transiciones simultáneamente:

 -webkit-transition: color .2s linear, text-shadow .2s linear; -moz-transition: color .2s linear, text-shadow .2s linear; -o-transition: color .2s linear, text-shadow .2s linear; transition: color .2s linear, text-shadow .2s linear; 

Ejemplo: http://jsbin.com/omogaf/2

Si haces todas las propiedades animadas de la misma manera, puedes configurar cada una por separado lo que te permitirá no repetir el código.

  transition: all 2s; transition-property: color, text-shadow; 

Aquí hay más sobre esto: ¿ taquigrafía de transición CSS con múltiples propiedades?

Evitaría usar la propiedad todo (propiedad de transición sobrescribe ‘todo’), ya que podría terminar con un comportamiento no deseado y resultados de rendimiento inesperados.

 .nav a { transition: color .2s, text-shadow .2s; } 

Aquí hay una mezcla de LESS para la transición de dos propiedades a la vez:

 .transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) { -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; transition: @transition1 @transition1-duration, @transition2 @transition2-duration; } 

Es posible hacer las transiciones múltiples establecidas con diferentes valores para la duración, el retraso y la función de temporización. Para dividir el uso de diferentes transiciones ,

 button{ transition: background 1s ease-in-out 2s, width 2s linear; -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */ } 

Referencia: https://kolosek.com/css-transition/