Animaciones y transiciones¶

Los efectos de animación y transición permiten mover o cambiar la forma de los elementos de la página. Muchos de estos efectos se basan en funciones de transformación que podemos aplicar sobre los elementos. Analizaremos con detalle estos aspectos a continuación.

1. Transformaciones¶

La propiedad transform nos permite realizar una transformación sobre un elemento. Esta transformación puede ser de varios tipos, dependiendo de la función que apliquemos. Es importante que NO haya separación entre el nombre de la función y los paréntesis que la acompañan. Puedes descargar este ejemplo para comprobar el funcionamiento de cada transformación, e incluso modificarlas para ver su comportamiento.

Para empezar, puede ser un simple desplazamiento, con la función translate. Este desplazamiento sólo puede hacerse en relación a la posición actual del elemento. Podemos utilizar dos parámetros: el desplazamiento en X (desde el extremo izquierdo del elemento) y en Y (desde el extremo superior). Ambos admiten valores negativos (para moverse hacia la izquierda y hacia arriba, respectivamente). Por ejemplo, la siguiente regla desplaza una caja 100 píxeles a la derecha y 20 píxeles hacia abajo:

div 
{ 
    transform: translate(100px, 20px); 
}

Si sólo queremos mover en una dirección, tenemos las funciones translatex y translatey, a las que sólo debemos indicarles el movimiento horizontal y vertical, respectivamente.

Podemos también hacer escalados (cambios de tamaño), con la función scale. Le indicamos con dos parámetros el escalado en X e Y (siendo 1 el tamaño real, 0.5 la mitad del tamaño real, 2 el doble del tamaño real, etc.). Si sólo indicamos un valor, se empleará tanto para el escalado en X como para el escalado en Y. Por ejemplo, este estilo escala las imágenes a la mitad de su tamaño en pantalla:

img 
{ 
    transform: scale(0.5, 0.5); 
}

Al igual que en el caso anterior, también tenemos las funciones scalex y scaley para escalar sólo en una dimensión.

Otra operación de transformación habitual es la rotación alrededor del punto de origen del elemento (por defecto, su centro). Indicamos el ángulo de rotación en grados (grados positivos rotan hacia la derecha, en el sentido horario).

div 
{ 
    transform: rotate(45deg); 
}

Finalmente, otro tipo de transformación que podemos aplicar es la inclinación a lo largo de los ejes X e Y, con la función skew. La inclinación con respecto a cada eje se indica en grados. Con esto se consigue un elemento inclinado, como con perspectiva.

div 
{ 
    transform: skew(20deg, 5deg); 
}

Si queremos aplicar más de una transformación, se ponen una tras otra separadas por espacios:

div 
{ 
    transform: translatex(50px) scale(1.5, 0.25); 
}

2. Transiciones¶

Una transición es un efecto por el que un elemento pasa de un estado o posición inicial a otro, pero no de forma inmediata (como sucede en las transformaciones) sino paulatinamente a lo largo de unos segundos. Por ejemplo, podemos hacer cambios graduales de color, o de posición de un elemento. Para ello, utilizaremos la propiedad transition, a la que le daremos los siguientes valores (separados cada uno por espacios):

La propiedad CSS del elemento sobre la que se debe actuar en la transición (por ejemplo: color, width, height, background-color...).
La duración de la transición, en segundos (s) o milisegundos (ms).
La función de transición (opcional), que puede valer linear (toda la transición tiene el mismo ritmo), ease (empieza lenta, luego va rápida y termina lenta), ease-in (comienzo lento), ease-out (final lento), etc.
Un retraso (opcional) al inicio de la transición, es decir, un tiempo de espera en segundos o milisegundos, antes de empezar.

Si queremos aplicar una transición sobre más de una propiedad, se pone una coma y se repiten estos valores para la siguiente propiedad CSS. Por ejemplo, el siguiente CSS cambia la posición (X) y el color de una caja cuando pasamos el ratón por encima, en una animación de 2 segundos para la posición y 1 segundo para el color, con final lento.

#caja1 
{
    position:relative;
    left: 0px;
    background-color: red;
    transition: background-color 1s ease-out, left 2s ease-out; 
}

#caja1:hover 
{
    background-color: blue;
    left: 100px;
}

Notar cómo necesitamos definir dos reglas: una con las condiciones iniciales del elemento, y otra con las condiciones que cambien al pasar el ratón por encima (:hover). En las condiciones iniciales, indicamos la(s) transición(es) que queremos, que serán las que cambien hasta las indicadas en la regla :hover, y también indicamos los valores iniciales que tendrán las propiedades que queremos cambiar (posiciones iniciales, colores iniciales...). En la regla :hover simplemente indicamos los valores finales que queramos que tengan las propiedades a cambiar (en el caso anterior, el incremento en X y el color de fondo final). En el caso de querer cambiar la posición (left o top), es importante definir el tipo de posicionamiento del objeto (relativo, en el caso anterior).

También podríamos hacer que las transiciones empiecen al pasar el ratón por encima de otro elemento que contenga al actual, o que esté conectado con él de alguna manera. Por ejemplo, si queremos aplicarlas al entrar con el ratón en cualquier lugar de la página, en lugar de usar el selector #caja1:hover anterior, usaríamos este:

html:hover #caja1 
{
    background-color: blue;
    left: 100px;
}

Ejercicio 1

Crea una página llamada efectos.html y añádele tres cajas identificadas como caja1, caja2 y caja3. Define para ellas estos estilos:

La primera caja (caja1) debe tener una anchura y altura de 200px. Bordes redondeados de 10px de radio y degradado de blanco a naranja, de izquierda a derecha.
La segunda caja (caja2) debe tener una anchura de 200px y altura de 400px respectivamente. Debe tener bordes redondeados con 5px de radio, y color rojo claro de fondo.
La tercera caja (caja3) debe tener anchura de 300px, y altura de 100px. Debe tener un borde redondeado de color gris de 5px de grosor, y sombra de 10px por la derecha y por abajo, de color negro, sin propagación.
Todas las cajas deben tener 10px de margen a cada lado, y posicionarse unas junto a otras (con float o usando grid)

Al final, debe quedarte algo así:

Añade una transición a la caja 2 para que, al pasar el ratón por encima, cambie su color del rojo claro al azul claro, en 2 segundos.
Añade otra transición a la caja 3 para que, al pasar el ratón por encima, se desplace 20 píxeles hacia abajo, en 1 segundo.
Haz que la caja 1 baje 200 píxeles en cuanto pongamos el ratón dentro de la página.

3. Animaciones¶

Además de todo esto, CSS3 también permite realizar animaciones sobre los elementos. Las animaciones son más complejas que las transiciones porque en éstas sólo hay un estado inicial y uno final, mientras que en una animación hay muchos estados intermedios.

4. Prefijos CSS¶

Algunas de las opciones que hemos visto en estos documentos no son soportadas por ciertos navegadores, o por ciertas versiones de los mismos. Por este motivo, es habitual en las hojas CSS definir distintas variantes para que cada navegador aplique las que le sean compatibles. Esto se consigue añadiendo ciertos prefijos a las propiedades CSS, de modo que el navegador identifica la que le corresponde.

div{
     transform: …;   /* Navegadores que implementan especificación oficial */
     -webkit-transform: …;   /* Versiones antiguas de Chrome (Motor Webkit) */
     -moz-transform: …;   /* Versiones antiguas de Firefox (Motor Gecko) */
     -ms-transform: …;   /* Versiones antiguas de IE/Edge (Motor Trident) */
     -o-transform: …;   /* Versiones antiguas de Opera (Motor Presto) */
}