Mediante las transiciones CSS podemos suavizar cambios repentinos de estilo para que se realicen de forma gradual y suave.

En CSS3 se introduce uno de los aspectos más interesantes en 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 a otro. Ahora, con 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:

Propiedades Valor
transition-property all | none | propiedad
transition-duration 0 | tiempo
transition-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(A, B, C, D)
transition-delay 0 | tiempo

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 tipo de transición que queremos conseguir. Cuando comenzamos, recomiendo utilizar linear, que realiza una transición lineal, siempre a velocidad constante. Sin embargo, podemos variar dicha velocidad para que sea más rápida al principio y más lenta al final, o viceversa, entre otras posibilidades.

Los valores que puede tomar la propiedad son los siguientes:

Valor Inicio Transcurso Final Equivalente en cubic-beizer
ease Lento Rápido Lento (0.25, 0.1, 0.25, 1)
linear Normal Normal Normal (0, 0, 1, 1)
ease-in Lento Normal Normal (0.42, 0, 1, 1)
ease-out Normal Normal Lento (0, 0, 0.58, 1)
ease-in-out Lento Normal Lento (0.42, 0, 0.58, 1)
cubic-bezier(A, B, C, D) - - - Transición personalizada

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:

Parámetro Valor Descripción Pertenece a
A X1 Eje X del primer punto que orienta la curva bezier. P1
B Y1 Eje Y del primer punto que orienta la curva bezier. P1
C X2 Eje X del segundo punto que orienta la curva bezier. P2
D Y2 Eje Y del segundo punto que orienta la curva bezier. P2

Cubic Bezier

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. Sin embargo, si movemos el ratón fuera del enlace, no se produce transición sino que realiza el cambio de forma brusca. Podemos incluir las propiedades de transición en el primer bloque y así contemplar también la transición de salida.

Atajo: Transiciones

Como siempre, podemos resumir todas estas operaciones en una propiedad de atajo denominada transition. El orden de sus parámetros es el siguiente:

div {
    transition: <property> <duration> <timing-function> <delay>
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).