Transiciones CSS

En CSS aparecen uno de los aspectos más interesantes de la web interactiva: las transiciones. En versiones anteriores de CSS sólo se podían utilizar ciertas funcionalidades interactivas con pseudoclases como :hover o :focus. Sin embargo, dichas transiciones ocurrían de golpe, pasando de un estado inicial a otro final. Mediante las transiciones, tenemos a nuestra disposición una gran flexibilidad que nos permitirá dotar de atractivos y elegantes efectos de transición que multiplicarán por mil las posibilidades de nuestros diseños.

Las transiciones se basan en un principio muy básico, conseguir un efecto suavizado entre un estado inicial y un estado final. Las propiedades relacionadas que existen son las siguientes:

En primer lugar, la propiedad transition-property se utiliza para especificar la propiedad a la que que afectará la transición. Podemos especificar la propiedad concreta (width o color, por ejemplo) o simplemente especificar all para que se aplique a todos los elementos con los que se encuentre. Por otro lado, none hace que no se aplique ninguna transición.

Nota: Debes saber que no todos los elementos permiten animación debido a su complejidad. Por ejemplo, los background-image de gradientes no son animables actualmente.

Con la propiedad transition-duration especificaremos la duración de la transición, desde el inicio de la transición, hasta su finalización. Se recomienda siempre comenzar con valores cortos, para que las transiciones sean rápidas y elegantes.

Si establecemos una duración demasiado grande, el navegador realizará la transición con detención intermitentes, lo que hará que la transición vaya a golpes. Además, transiciones muy largas pueden resultar molestas a muchos usuarios.

Función de tiempo

La propiedad transition-timing-function permite indicar el ritmo de la transición que queremos conseguir. Cuando estamos aprendiendo CSS, recomiendo utilizar linear, que realiza una transición a un ritmo constante. Sin embargo, podemos utilizar otros valores para conseguir que el ritmo sea diferente al inicio y/o al final de la transición.

Los valores que puede tomar la propiedad son los siguientes:

Una función de tiempo linear siempre es constante, mientras que ease comienza suavemente, continua de forma más rápida y termina suavemente de nuevo. Ease-in y ease-out son variaciones que van más lento al principio o al final, y ease-in-out una mezcla de las dos.

Cubic-Bezier()

La función de tiempo cubic-bezier() es una función personalizada, donde podemos darle unos valores concretos depediendo de la velocidad que queramos que tenga la transición. En la última columna de la tabla anterior podemos ver los valores equivalentes a cada una de las palabras clave mencionadas. En principio, el formato de la función es cubic-bezier(A, B, C, D), donde:

También puedes utilizar la página Cubic Bezier, donde puedes ver de forma interactiva la velocidad de las transiciones dependiendo de los parámetros utilizados.

Por último, la propiedad transition-delay nos ofrece la posibilidad de retrasar el inicio de la transición los segundos especificados.

Veamos un pequeño ejemplo de todo ello:

a {
  background: #DDD;
  color: #222;
  padding: 2px;
  border: 1px solid #AAA;
}

a:hover {
  background: #FFF;
  color: #666;
  padding: 8px 14px;
  border: 1px solid #888;

  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
}

Truco: Si nos fijamos bien, este estilo se aplica sólo al mover el ratón sobre el enlace (transición de entrada). Sin embargo, si movemos el ratón fuera del enlace, no se produce transición sino que realiza el cambio de forma brusca. Si movemos las propiedades de transición al primer bloque, se aplicarán tanto en las transiciones de entrada como en las de salida.

Atajo: Transiciones

Como siempre, podemos resumir todas estas operaciones en una propiedad de atajo denominada transition. Los valores del ejemplo superior, se podrían escribir como se puede ver a continuación (si no necesitas algún valor, se puede omitir):

div {
  /* transition: <property> <duration> <timing-function> <delay> */
  transition: all 0.2s ease-in;
}