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

selector padre css

Question

Es una pregunta bastante sencilla pero no puedo encontrar muy buena documentación sobre las propiedades de transición de CSS. Aquí está el fragmento de código 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 se animará, pero no el color. ¿Cómo consigo que ambos animen simultáneamente? Gracias por cualquier respuesta.

Answer 1

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

Answer 2

Aquí hay una mezcla MENOS para transicionar 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;
}

Answer 3

Es posible realizar múltiples transiciones con diferentes valores para la función de duración, retardo y temporización. Para dividir diferentes transiciones use ,

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/

Answer 4

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 función de sincronización predeterminada es la ease , por lo que no tiene que especificarla. Si realmente quieres linear , necesitarás especificarlo:

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

Esto comienza a ser repetitivo, así que si va a usar los mismos tiempos y funciones de 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;

Answer 5

Si hace que todas las propiedades estén animadas, puede configurar cada una por separado, lo que le permitirá no repetir el código.

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

Hay más información sobre esto aquí: CSS, la taquigrafía de transición con múltiples propiedades?

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

Answer 6

También puede simplemente significativamente con:

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

Answer 7

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