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


327

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 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 se animen simultáneamente? Gracias por cualquier respuesta


No olvide que transition: alles muy defectuoso para safari / ipad: joelglovier.com/writing/…
Oğuzhan Kahyaoğlu

Respuestas:


584

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

easees la función de tiempo predeterminada, por lo que no tiene que especificarla. Si realmente lo desea linear, deberá especificarlo:

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

Esto comienza a ser repetitivo, por lo que si va a utilizar los mismos tiempos y funciones de temporización en varias propiedades, es mejor seguir adelante y usar las diversas transition-*propiedades en lugar de la abreviatura:

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

11
Supongo que porque transformación es una cadena donde el orden es importante, por lo que la sintaxis se siente bien, si estás acostumbrado a encadenamiento funcional, mientras que la transición requiere una lista desordenada de elementos totalmente independientes, por lo que comas son apropiadas
mirichan

1
Como comentario general sobre las transiciones en CSS, uno debe tener en cuenta que tener múltiples definiciones de transición una tras otra no funcionará, y para lograrlo, deben estar en la misma definición (como en la SA aquí). Según las reglas básicas de CSS, se aplica la regla "más reciente", por lo que si hay varias definiciones en líneas separadas, solo se aplicará la última definición. FYI
TheCuBeMan

37

También puede simplemente significativamente con:

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

44
En realidad, puede eliminar 'todos' ya que ese es el valor predeterminado a menos que se especifique lo contrario.
joshnh

13
+1 para un excelente punto, pero creo que es útil explícito mantenerlo allí, particularmente por su consistencia y comprensión entre los equipos.
XML

44
¡Cuidado con esto! Si se desarrolla para móviles, en combinación con elementos acelerados por hardware, hace que los nuevos dispositivos tengan fallas y que los viejos no se puedan usar.
Ilya Karnaukhov

2
Gracias, @ CanerŞahin. ¿Puede darnos alguna documentación o herramientas de evaluación comparativa que ayuden a las personas a comprender este punto? Además, ¿ve evidencia que muestre que 'todo' es peor que no usar ningún especificador?
XML

3
@XML La forma en que se explicó que hay dos efectos negativos. 1, el navegador agrega recursos adicionales debido al uso de 'todos'. El navegador escuchará atentamente ese elemento a la espera de cualquier cambio que sea menos eficaz y pueda crear un cambio de página. 2, puede crear efectos inesperados si un desarrollador luego coloca un color de fondo que luego se hará una transición que podría no ser esperada o requerida.
Stefan Burt

29

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


24

Si hace que todas las propiedades sean animadas de la misma manera, puede configurar cada una por separado, lo que le permitirá no repetir el código.

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

Aquí hay más información: ¿ abreviatura de transición CSS 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 golpes de rendimiento inesperados.



1

Aquí hay un MENOS mixin 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;
}

Autoprefixer es aún mejor!
reescrito el

autoprefixer + stylus FTW.
Jason Lydon

1

Es posible realizar las transiciones múltiples establecidas con diferentes valores de duración, retraso y función de 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/


0

También es posible evitar especificar las propiedades por completo.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.