CSS: Transiciones

Las transiciones permiten realizar cambios graduales de estilos CSS para pasar de un estado a otro en un tiempo mayor que 0 segundos. Estos cambios pueden suceder a partir de un evento concreto, como sería el caso de poner el cursor (puntero del ratón) encima de un elemento en el que se usa las pseudoclases :hover o :active, o aplicado directamente con JavaScript.

En CSS existe una serie de propiedades específicas que permiten indicar las propiedades del elemento que deben cambiar gradualmente, la duración de la animación o el tipo de transición que debe aplicarse.

Propiedades descritas en este artículo:

Un ejemplo de transición sería el siguiente. Creamos un rectángulo naranja que cuando se pulse (pseudoclase :active) cambiará de estado, pasando de tener un ancho de 80 píxeles a 160 píxeles y volviéndose de color turquesa.

Código CSS:

.rectangulo {
  background: #ff7f2a;
  height: 30px;
  width: 80px;
}

.alarga {
  transition: all 1s ease-in-out;
}

Resultado:

Al mantener presionado el rectángulo naranja se hará más ancho y cambiará de color de forma gradual durante un segundo. Al dejar de presionar, regresará a su aspecto original, también durante un segundo.

En este ejemplo usamos la propiedad abreviada (shorthand) transition, pero en los siguientes ejemplos usaremos las propiedades específicas para ver las características de cada una.

La propiedad ‘transition-property’

La propiedad CSS transition-property permite indicar los nombres de las propiedades sobre las que se quiere aplicar el efecto de una transición. Para indicar una lista de propiedades se pueden separar por una coma. Con la palabra clave all se aplicará la transición a todas las propiedades CSS.

Es bastante habitual, por ejemplo, usar como valor las propiedades color, para hacer una transición del color del texto; background, para cambiar el color de fondo; border, para el estilo de los bordes; opacity, para la transparencia; y transform, para animar los cambios en las transformaciones 2D y 3D.

Si se indica una propiedad abreviada, como es el caso de background, la transición se aplicará a las propiedades que abrevia: background-color, background-image, background-repeat, etc.

Para que una transición funcione correctamente, hay que tener un estado inicial y un estado final de la propiedad CSS que se quiere modificar. De no ser así, el navegador web no podrá realizar la animación de transición.

Vamos a ver un ejemplo especificando la transición solo para la propiedad background, de esta manera veremos como cambia de tamaño de forma brusca (0s) y de color de forma suave (2s).

Código CSS:

.solo-fondo {
  transition-duration: 2s;
  transition-property: background;
}

Resultado:

Al indicar que solo queremos la transición en el color de fondo (background), no hay transición en el cambio de tamaño ni en ninguna otra propiedad CSS que pudiéramos haber modificado.

La propiedad ‘transition-duration’

Para definir la duración de la transición se usa la propiedad transition-duration, desde el inicio hasta el final de la transición. También se puede indicar una lista de duraciones, que corresponderán con las propiedades que se haya definido en la propiedad transition-property, siguiendo el mismo orden.

El valor por defecto de esta propiedad es 0s, que significa 0 segundos. Con este valor no se producirá ninguna animación de transición, por tanto el cambio de estilos será instantáneo. Los valores negativos no serán válidos. Debe usarse las unidades de tiempo en segundos (s) o en milisegundos (ms).

Vamos a reutilizar nuestro ejemplo para crear una transición que dure cuatro veces más que en los anteriores ejemplos, por tanto, cuatro segundos.

Código CSS:

.cuatro-segundos {
  transition-duration: 4s;
  transition-property: all;
}

Resultado:

Se puede ver como al pulsar el rectángulo naranja, se alarga y cambia de color gradualmente a lo largo de cuatro segundos. Es mucho más lento.

La propiedad ‘transition-timing-function’

La propiedad transition-timing-function es utilizada para especificar la función que se debe usar en la animación de la transición. La función define la aceleración de los pasos intermedios de la animación. Por ejemplo, puede ser una función lineal con la velocidad constante (linear), o una función que comience la transición más lentamente pero que luego acelere en el tramo final (ease-in).

En la tabla siguiente se muestra todas las funciones predeterminadas que nos servirán para modificar la velocidad de las transiciones:

Si no se indica ninguna función, por defecto se usará ease, con un inicio de transición lento y suave, acelerando en el tramo medio de la transición y volviendo a frenar en el tramo final para terminar lentamente.

A continuación se muestra un ejemplo de cada función:

Código CSS:

.ease {
  transition-timing-function: ease;
}

.linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: ease-in;
}

.ease-out {
  transition-timing-function: ease-out;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

Resultado:

ease

linear

ease-in

ease-out

ease-in-out

Todos tardan dos segundos en finalizar el cambio, pero unos dan la aparente sensación de ser más rápidos que otros.

La función ‘cubic-bezier()’

Más allá de estas funciones predeterminadas, existe la posibilidad de personalizar la aceleración y la desaceleración. La función cubic-bezier() permite definir una curva de tiempo personalizada. Para ello utiliza dos puntos de control definidos a partir de cuatro parámetros que llamaremos x1, y1, x2 e y2.

¿Qué significan estos cuatro parámetros?

Estos cuatro parámetros serán valores numéricos positivos o negativos, con decimales. El valor 0 está en el inicio de la transición y el valor 1 se encuentra en el final. Imagina una cuadrícula de coordenadas cartesianas: el punto “0, 0” está abajo a la izquierda, mientras que el punto “1, 1” está arriba a la derecha.

En este ejemplo veremos una función personalizada.

Código CSS:

.cubic-bezier {
  transition-duration: 2s;
  transition-property: all;
  transition-timing-function:
    cubic-bezier(0.8, 0, 0.2, 1);
}

Resultado:

Al mantener pulsado el rectángulo naranja se puede ver como la transición empieza muy lentamente, en el tramo central avanza muy rápidamente y otra vez termina muy lentamente.

Puedes usar la herramienta externa cubic-bezier para crear funciones de aceleración personalizadas, ya que es más intuitiva.

La función ‘steps()’

Con la función steps() es posible crear una transición que se realiza a partir de un número determinado de saltos bruscos. Por tanto, no se producirá mediante una animación suave entre diferentes valores, sino de forma escalonada.

Por ejemplo, si se indica que la transición tenga 4 pasos, se mantendrá de forma temporal en el 0%, el 25%, el 50% y el 75% del momento exacto de la duración, realizando 4 paradas desde el principio hasta el final.

De forma opcional, puede indicarse un segundo parámetro que indica si la transición debería saltar al principio o al final de cada paso. Con la palabra clave start, el cambio de valores ocurre al inicio de cada intervalo; y con la palabra clave end, el cambio ocurre al final de cada intervalo. Por defecto se usa end.

Vamos a ver una transición sin suavidad, en 4 pasos bruscos.

Código CSS:

.steps {
  transition-duration: 2s;
  transition-property: all;
  transition-timing-function: steps(4, start);
}

Resultado:

Al mantener pulsado el rectángulo naranja, la transición ha saltado del estado que tiene al principio con el estado que tendría al 25% de recorrido. Después ha saltado al 50%, al 75% y finalmente al 100%.

La propiedad ‘transition-delay’

La propiedad CSS transition-delay permite indicar el tiempo que tarda en empezar la transición. Puede ser útil cuando se cambia valores de transformación, ya que en algunos casos se podría crear un bucle infinito.

Supongamos que queremos animar la traslación de un elemento cuando se pone el cursor encima. Al moverse, en algún momento quedaría fuera de la zona de debajo del cursor y regresaría a su estado original. En este punto, el elemento volvería a quedar debajo del cursor, volviendo a empezar la transición.

Los valores por defecto serán 0s (0 segundos) y 0ms (0 milisegundos), equivalentes a que no hay tiempo de espera. Un valor positivo retrasará el inicio de la transición. Con un valor negativo, el elemento se animará como si ya hubiera estado cambiando durante el período de tiempo indicado.

Vamos a ver un ejemplo aplicando un retraso de 1.2s.

Código CSS:

.delay {
  transition-delay: 1.2s;
  transition-duration: 0.5s;
  transition-property: all;
  transition-timing-function: ease-in-out;
}

Resultado:

Al mantener pulsado el rectángulo naranja, la transición no empieza hasta que haya transcurrido 1.2s. Después, empezará la transición, que tendrá una duración de medio segundo (0.5s). Al dejar de pulsar el rectángulo, también tardará 1.2s en regresar a su estado original.

La propiedad ‘transition’

La propiedad CSS transition es una abreviatura (shorthand) que unifica todas las anteriores. Para indicar que no hay transición se usa la palabra clave none. Para indicar una transición se usa los 4 valores en el siguiente orden:

1. Propiedad
2. Duración
3. Función de tiempo
4. Tiempo de espera

Algunos ejemplos:

.ejemplo1 {
  transition: all 2s ease-in-out 50ms;
}

.ejemplo2 {
  transition: background .25s ease-in;
}

.ejemplo3 {
  transition: color 300ms linear 10ms;
}

.ejemplo4 {
  transition: all 1s cubic-bezier(0.25, 0.5, 0.75, 0.5);
}

.ejemplo5 {
  transition: transform 2s steps(5) 1s;
}

El uso de esta propiedad es muy conveniente, ya que sintetiza mucho el código. Esto se traduce en una mayor facilidad a la hora de realizar el mantenimiento. Un archivo que ocupe menos memoria también se cargará más rápido.

Múltiples transiciones

Con CSS es posible definir múltiples transiciones a la vez. Es algo sencillo de realizar con la propiedad transition. Tan solo hay que separar los grupos de valores de esta propiedad mediante una coma.

Por ejemplo, vamos a crear tres tipos de transición a la vez. El color de fondo cambiará gradualmente en 0.8s, mientras que los bordes tardarán el doble (1.6s), y el tamaño del rectángulo necesitará 2.4s.

Código CSS:

.multiples {
  transition:
    background 0.8s ease-in,
    border 1.6s ease-in,
    width 2.4s ease-in;
}

Resultado:

Mantén pulsado el rectángulo naranja y observa como las tres propiedades (fondo, bordes y tamaño) cambian con una duración distinta.