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:

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. e=v*t

ease

ease-in: Aceleración constante e=½a*t²

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

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

Mas información de la timing-function en: transition-timing-function - CSS | MDN y en 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.

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. e=v*t

ease

ease-in: Aceleración constante e=½a*t²

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

forwards

backwards

both

animation-play-state: Como empieza la animación

running: Empieza ejecutándose

paused: Empieza pausada

animation: La unión de todas las anteriores

JavaScript

Timeout

Mas información:

CSS3 Animations

Top 9 Animation Libraries to Use in 2016

Animate.css

Magic Animations

Ejercicios

Ejercicio 1

Crea un programa en JavaScript+HTML+CSS que un rectángulo rojo vaya modificando el ancho desde lo 100px a los 600px y que tarde 4 segundos

Ejercicio 2

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

Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón

Ejercicio 4

Modifica el anterior ejercicio para que se haga grande al pulsar el botón pero si lo vuelves a pulsar que se haga otra vez pequeño