8. Animaciones

En este tema vamos a hablar de 3 cosas distintas:

Transformaciones: Es simplemente aplicar alguna transformación espacial a un elemento HTML como moverlo ,rotarlo o agrandarlo.

Transiciones: Es un API de CSS para hacer que las cosas se muevan en la pantalla.

Animaciones: Es otro API CSS mas complejo hacer que las cosas se muevan en la pantalla.

A veces nos referiremos a animaciones con el significado de hacer que las cosas se muevan en la pantalla y no al API de animaciones de CSS. Aunque realmente las animaciones no es solo que las cosas se muevan , se puede aplicar a muchas propiedades CSS como colores, opacidad, etc.

¿Que podemos hacer con animaciones? Veamos algunos ejemplos de animaciones usando solo CSS:

404

Reloj

Escaleras

Cuadros animados

Monument Valley

Lo mas importante de las animaciones es usarlas cuando tengan sentido y no solo como una moda o capricho. Es decir hay que usarlas cuando aportan algo al usuario. Un artículo que lo explica muy bien es el siguiente: Ground Rules for Web Animations.

Mas información:

Diseño

The ultimate guide to proper use of animation in UX

Evangelina Ferreira - Newton meets CSS

The Guide To CSS Animation: Principles and Examples

CSS

Animaciones y transiciones CSS: Vídeo de Youtube

CSS3: Animations vs. Transitions

Transiciones vs. Animaciones

Transformaciones

Las transformaciones es simplemente usar una nueva propiedad de CSS llamada transform.

Esta propiedad es como cualquier otra de CSS y no tiene nada que ver con las animaciones , aunque se suele usar bastante con ellas, por eso se explica aquí.

Esta propiedad CSS permite hacer lo siguiente sobre un elemento:

Moverlo

Escalarlo (Hacerlo mas grande o mas pequeño)

Rotarlo

Distorsionarlo: Es como torce el elemento tanto en el eje X como en el eje Y.

El listado de opciones es el siguiente:

translate(x,y)

translateX(n)

translateY(n)

scale(x,y)

scaleX(n)

scaleY(n)

rotate(angle)

skew(x-angle,y-angle)

skewX(angle)

skewY(angle)

Vamos ahora unos ejemplos:

Mover el elemento 50px en el eje X y 100px en el eje Y

Rotar el elemento 20 grados

Hacer el doble de grande el elemento en el eje X y el tripe en el eje Y.

Hacer la mitad de grande el elemento tanto eje X como en el eje Y.

Distorsiona el elemento 20 grados en el eje X y 10 grados en el eje Y.

Tambien se pueden aplicar varias transformaciones a la vez:

Las transformaciones que hemos visto con en 2 dimensiones. CSS también permite transformaciones en 3D.

El listado de opciones es el siguiente:

translate3d(x,y,z)

translateX(x)

translateY(y)

translateZ(z)

scale3d(x,y,z)

scaleX(x)

scaleY(y)

scaleZ(z)

rotate3d(x,y,z,angle)

rotateX(angle)

rotateY(angle)

rotateZ(angle)

perspective(n)

Mas información:

Transformaciones 2D

Transformaciones 3D

transform - CSS | MDN

Transiciones

Las transiciones se usan sobre todo para hacer cambios en los eventos de :

:hover

:focus

Etc.

Mas información:

Animaciones básicas con CSS transition

CSS3 Transitions

Veamos un ejemplo con :hover y después le vamos a añadir la transición para mejorarlo visualmente.

En el ejemplo que acabo de poner, al pasar el cursos sobre el botón se añade una sombra y cambia el color de fondo.

Sin embargo el efecto queda mal ya que es muy brusco pasar de:

background-color: #ffffff; => background-color: #deebfc;

box-shadow: none; => box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

Para evitar ésto, usamos en CSS la transición de la siguiente forma:

Con la línea anterior se hace que el cambio del color y añadir la sombra se haga con un transición que durará 1 segundo. Ahora el ejemplo quedaría así:

Podemos aplicar las transiciones a cualquier propiedad CSS que tenga un rango de valores , como al color, a la sombra o como podíais imaginar a las transiciones.

Por lo tanto , siempre que usemos :hover , :focus , etc, lo normal es añadir una transition: con las propiedades que hemos incluido en el :hover , :focus, etc.

La forma concreta de la propiedad transition es:

transition: propiedadCSS duracion timing-function retardo

propiedadCSS: La propiedad CSS a la que se le aplica la transición.

duracion: Duración en segundos de la transición

timing-function: La velocidad de la transición. Sus valores son:

linear: Velocidad constante.

ease

ease-in: Aceleración constante.

ease-out

ease-in-out

steps(pasos)

cubic-bezier(n,n,n,n)

retardo: Cuanto tiempo en segundos tarda en empezar la transición.

Mas información de la timing-function en:

<timing-function>

https://cubic-bezier.com/

CSS cubic-bezier Builder

Ceaser - CSS Easing Animation Tool - Matthew Lein

transition-timing-function - CSS | MDN

CSS transition-timing-function property

Por ejemplo: Se cambiará el ancho . Durará 3 segundos. Empezará y terminará mas lentamente . Empezará con 2 segundos de retardo.

Como pasa mucho en las propiedades CSS se puede poner también como varias propiedades independientes:

Animaciones

Las animaciones son similares a las transiciones pero mas potentes además que suelen usarse desde JavaScript.

Mas información:

CSS3 Animations

CSS Animation Libraries

AnimXYZ

Animate.css

Magic Animations

Las animaciones constan de dos apartados distintos.

La definición de la propia animación con @keyframes.

Los parámetros de la animación con la propiedad animation

Veamos un ejemplo:

Dentro de @keyframes definimos cada uno de los "fotogramas" que queremos que tenga la animación.

Luego dentro de la clase c-cuadrado--girar indicamos que animación aplicar y sus parámetros. Las propiedades que hay son:

animation-name: Nombre de la animación a realizar. Es el nombre del @keyframes.

animation-duration: Duración en segundos.

animation-timing-function: La velocidad

linear: Velocidad constante.

ease

ease-in: Aceleración constante

ease-out

ease-in-out

steps(pasos)

cubic-bezier(n,n,n,n): Para generar los valores se puede usar la siguiente página: cubic-bezier

animation-delay: Retraso en segundos en empezar la animación

animation-iteration-count: Nº de repeticiones de la animación. Se puede usar infinite para que nunca acabe.

animation-direction: Si va desde el principio al final o al revés, etc.

normal: Empieza en el 0% y avanza hacía el 100%

reverse: Empieza en el 100% y avanza hacía el 0%

alternate: Empieza en el 0% y avanza hacía el 100% y la 2º vez lo hace del 100% al 0% y así sucesivamente.

alternate-reverse: Empieza en el 100% y avanza hacía el 0% y la 2º vez lo hace del 0% al 100% y así sucesivamente.

animation-fill-mode: Que CSS se aplica cuando acaba.

none: La animación antes de empezar o despues de acabar no tiene ningún estilo definido en la animación.

forwards: Al acabar la animación se queda como en el último Frame.

backwards: Antes de empezar la animación (por si hay un delay), ya está como en el primer Frame.

both: Es unir forwards y backwards.

animation-play-state: Como empieza la animación. Mas información en How to Play and Pause CSS Animations with CSS Custom Properties

running: Empieza ejecutándose

paused: Empieza pausada

animation: La unión de todas las anteriores

Mas información de la timing-function en:

<timing-function>

https://cubic-bezier.com/

CSS cubic-bezier Builder

Ceaser - CSS Easing Animation Tool - Matthew Lein

animation-timing-function - CSS | MDN

CSS animation-timing-function Property

JavaScript

Para volver a ejecutar la animación desde JavaScript se hace de la siguiente forma:

Es decir que hay que quitar la clase CSS que tiene la animación y volver a ponerla. El problema es que si la quitas y la vuelves a poner , el navegador no se entera. Así que hay que hacer el truco de quitarla , esperar 10 ms con un timeout y añadir la clase.

Mas información:

Timeout

Animaciones simétricas

La animación que hemos visto , vuelve al mismo sitio. Si queremos una animación que haga eso , no es necesario definir la ida y la vuelta. Es tan sencillo como solo definir la ida y decir que vuelva.

Eso se consigue de la siguiente forma:

Los cambios que hemos hecho son los siguientes:

Hacemos que la animación dure la mitad: animation-duration: 1.5s;

Pero hacemos que la haga 2 veces: animation-iteration-count: 2;

Por último hacemos que la segunda vez la haga al revés: animation-direction: alternate;

Y con éste truco siempre tenemos una animación de ida y vuelta.

Ejercicios

Ejercicio 1

Crea una página web que:

Muestre un cuadrado rojo de 200px de lado.

Que al poner el cursor encima gire 45 grados y cambie su color a azul.

Que al quitar el curso vuelva a su posición y su color original.

Que dure 2 segundos.

Ejercicio 2

Crea una página web que:

Muestre un cuadrado rojo de 200px de lado.

Que al poner el cursor encima se cambia su ancho para ocupar 600px

Que al quitar el curso vuelva a su tamaño original.

Que dure 3 segundos.

Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos.

Ejercicio 3

Crea una página web:

Que el fondo sea gris claro.

Muestre un input de tipo text de fondo banco, bordes sin redondear.

Que al poner el curso sobre él para escribir, se hagan los bordes redondeados, el color de fondo sea un azul muy clarito, se añada una sombra suave de color azul.

Que al quitar el curso el input vuelva a su etilo original.

Que dure 1 segundo.

Ejercicio 4

Crea una página web:

En el fondo se verá una foto con la torre de pisa.

Que sobre el borde superior de la torre coloques la imagen de una pelota.

Que al pulsar un botón se active una animación que deje caer la pelta hasta el suelo y al acabar se quede ahí.

Si se vuelve a pulsar el botón, repetirá la animación.

La duración de la animación será de 9,4s (Es lo que tardaría en caer una pelota desde la torre de pisa suponiendo que no hay rozamiento)

Debes probar con distintas animation-timing-function y elegir la que se parezca mas a la caída real de la pelota.

Ejercicio 5

Repite el ejercicio anterior de la torre de pisa pero ahora será una canasta de baloncesto y una pelota de baloncesto.

Otra diferencia es que la pelota al llegar abajo rebotará y volverá hasta arriba del todo y así indefinidamente.

Ejercicio 6

Crea una página web:

En el fondo se verá una foto del espacio y de la Estación Espacial Internacional (IIS).

Que sobre algún lado de la IIS coloques la imagen de un astronauta.

Que al pulsar un botón se active una animación que nueva el astronauta durante 1000px y al acabar se quede ahí.

Si se vuelve a pulsar el botón, repetirá la animación.

La duración de la animación será de 5s

Debes probar con distintas animation-timing-function y elegir la que se parezca mas al movimiento rectilíneo uniforme que se tiene en el espacio.

Ejercicio 7

Crea una página web:

En el fondo se verá una foto de una carretera recta vista desde arriba.

Que sobre el inicio de la carretera coloques la imagen de un coche visto desde arriba.

Que al pulsar un botón se active una animación que nueva el coche hasta llegar al final de la carretera y al acabar se quede ahí.

Si se vuelve a pulsar el botón, repetirá la animación.

La duración de la animación será la necesaria para que de sensación de realidad.

Debes probar con distintas animation-timing-function y elegir la que se parezca mas al movimiento acelerado de un coche hasta llegar a una velocidad y luego que sigue con una velocidad constante.

Ejercicio 8

Repite el ejercicio anterior pero ahora el coche irá frenando cuando llegue al final de la carretera.

Ejercicio 9

Crea una página web:

Que muestre un botón que tenga con el texto "Registrarse" y un icono de un usuario (usar Font Awesome).

Que cuando pasen 20 seg desde la carga de la página, se lance una animación que haga que el icono se haga un poco mas grande y tenga "mas" color de forma que resalte.

La animación no se debe ejecutar si el usuario antes ha pulsado el botón.

Al acabar la animación el icono se quedará como estaba

La animación debe durar 2s.