Cómo manejar varias transiciones en CSS3

En esta ocasión voy a mostrar como emplear varias transiciones en CSS sobre un mismo elemento. Sin embargo, antes de entrar en materia, será recomendable saber cómo funciona el atajo transition para que en caso de realizar varias transiciones, no quede un CSS con tantas líneas.

El atajo transition

A medida que he explicado las diferentes propiedades de transition, habrás observado que tengo en cuenta los prefijos de los navegadores. Esto hace que si usamos una transición con todas sus propiedades quedaría un buen churro.

Para ello podemos usar la propiedad transition y asignar los valores en función de un orden:

  1. El primer valor sería la propiedad afectada de la transición (transition-property).
  2. Tendría la duración (transition-duration).
  3. El ritmo (transition-timing-function)
  4. Y cuánto tiempo tarda en iniciar la animación (transition-delay).

No es necesario especificar todos los valores, de hecho el siguiente ejemplo no va a contar con un delay.

Cómo puedes observar, tengo en cuenta la compatibilidad de los navegadores y una transición en pocas líneas. Tener un CSS más compacto te ayudará a encontrar más fácilmente lo que quieras modificar.

Cómo manejar varias transiciones

Todas las propiedades referidas con transiciones permiten realizar varias en una misma llamada. Por ejemplo, podemos cambiar el fondo de un elemento mientras aumenta su tamaño y modifica su rotación.

En el siguiente ejemplo vamos a crear un div que cambiará de color y tamaño al mismo tiempo. Como vamos a modificar el elemento mediante transform y background, será preciso indicarlo en el transition-property.

A continuación indicamos la duración. Si sólo indicamos un valor, la duración será la misma para los 2. En caso contrario podemos indicarle cuanto durará cada transición por si queremos que una sea más rápida que la otra.

Y finalmente le indicamos el ritmo de la transición. Sucede lo mismo que con la propiedad duration, si indicamos uno, será empleado por las 2 transiciones.

Ahora si queremos emplear múltiples transiciones con el atajo transition, sólo hay que especificar todos los valores de cada transición y separarlas por comas.

varias transiciones css - Resultado

Resultado con varias transiciones

Si quisiéramos indicar que la transición se aplique a todas las propiedades (color, tamaño…) podemos emplear all

De esta forma si el elemento cambia de tamaño, de color, opacidad, etc siempre se realizarán al mismo ritmo, duración y retraso.

Y hasta aquí cómo manejar varias transiciones en CSS, espero que os haya gustado. A seguir picando 🙂