Animaciones en CSS

Introducción

CSS es un lenguaje de estilo y con él decimos cómo tiene que verse nuestro HTML. Hasta ahora hemos visto algunas de las cosas que podemos hacer con estilos e incluso como aplicarlas cuando se cumplen ciertas condiciones gracias a las mediaqueries. Todavía nos falta el aspecto más vistoso que le da más vida al apartado gráfico: transiciones y animaciones.

Transiciones

Las transiciones son "transiciones" entre dos estados de un elemento, bueno, entre propiedades de un selector. Por ejemplo, con el :hover de un enlace podemos tener un efecto donde aplicamos unos estilos al enlace y otros cuando el usuario ponga el cursor por encima. Por si no lo tenemos en la cabeza es esto:Hover básico

Bien, con las transiciones podemos controlar el paso entre dos valores de una propiedad CSS.

​▸ Ejemplo en Codepen​

o entre varios valores de varias propiedades:

​▸ Ejemplo de varias propiedades en Codepen​

¿Cómo se construye una transición?

Las transiciones de especifican con la propiedad transition que es un atajo (shortcut) de:

• transition-property: la propiedad sobre la que queremos aplicar la transición

• transition-duration: la duración de la transición en segundos o milisegundos

• transition-timing-function: una función de tiempo para determinar cómo aplicar la transición, hay unas palabras clave para algunas funciones​

• transition-delay: un tiempo de retardo antes de empezar la transición

No hace falta especificarlas todas y podemos usar el atajo o no. En los ejemplos lo usamos con la propiedad, la función de tiempo y la duración de la transición:

.link {    transition: color ease 1s;}

y definimos transiciones de varias propiedades separándolas por ,:

.link {  transition: color ease 1s, border-color ease 1s;}

Vale, y ¿esta propiedad se coloca en cualquier sitio?

Pues no, pero para empezar vamos a colocarla en el estado inicial del selector cuyas propiedades vamos a animar. Por ejemplo, si queremos un enlace con una transición de color:

a {    color: blue;    transition: color ease .8s;    &:hover {        color: black;    }}

EJERCICIO 1

Dado este botón:

• Añade transiciones para que el coloreado y el sombreado no sean tan bruscos en hover y click ;)

• Añade transiciones para modificar alguna propiedad (tamaño, redondeado, color de fuente...)

Con este tipo de efectos podemos limar pequeños detalles o resolver interacciones más complejas, sólo cambiando clases.

En este Codepen usamos javascript para que al hacer click en el botón "Menú" se aplique una clase al elemento .page, que se elimina al hacer click en la X de "Cerrar".

EJERCICIO 2

Vamos a ver cómo funcionan las transiciones cuando hay muchos elementos.

En este Codepen hemos preparado un dashboard básico y tendréis que aplicar unas transiciones para suavizar los efectos que se modifican al hacer hover:

• Color de fondo (.5s)

• Sombra (1s)

¿Qué pasa si muevo el ratón sobre varias cards a la vez?

EJERCICIO 3

¿Cómo os veis para hacer una página que al pasar el ratón sobre ella haga que "popup" entre despacito desde abajo de la ventana del navegador y se coloque en el centro?

Animaciones

Mientras las transiciones nos permiten pasar de un estado a otro, las animaciones nos dejan variar los valores de las propiedades CSS en el tiempo. Para ello definimos una secuencia de estados y cómo se va a controlar la animación.

Primero definimos unos keyframes con la regla @keyframes y dentro definiremos las distintas posiciones de nuestra animación. La primera será al 0% y la última al 100% (en lugar de 0% y 100% podremos usar from y to):

@keyframes intro {    from {        opacity: 0;        transform: scale(10) rotate(-150deg);    }    to {        opacity: 1;        transform: scale(1);    }}

y luego se la aplicamos a nuestro selector con el atajo animation o con sus subpropiedades:

• animation-delay: determina el tiempo hasta que empieza la animación

• animation-direction: especifica si la animación mantendrá la dirección, la alternará en cada repetición, o si la resetea al punto inicial

• animation-duration: marca el tiempo que durará la animación

• animation-iteration-count: dice las veces que se va a repetir la animación

• animation-name: especifica el identificador de la animación

• animation-play-state: permite pausar una animación

• animation-timing-function: funciona igual que con las transiciones

• animation-fill-mode: especifica si los valores de la animación se aplicarán al elemento animado una vez termine o antes de empezar

Por ahora vamos a ver como aplicar nuestra animación sencilla:

.hi {    font-size: 100px;    color: #3CDBC0;    animation-name: intro;    animation-duration: 5s;    animation-iteration-count: 1;}

​▸ El resultado en Codepen​

Vamos a probar una menos... powerpoint​

Tenéis la documentación completa de las sub propiedades de animation en la MDN: CSS Animations​

Ejemplos de animaciones (más o menos curradas)

• ​Pure CSS Animated Checkbox​

• ​CSS Animated Hamburger Icon​

• ​CSS Animate (y ha escrito un post sobre cómo se hace)

• ​CSS Animation Material Design​

• ​CSS Animation with steps()​

• ​Mr JeellyFish pure CSS animation​

• ​WWDC 2015 CSS​

• ​Cloudy Spiral CSS animation​

NOTA: Animar es un trabajo en sí mismo y aunque, de entrada, nadie nos va a pedir que seamos animadoras profesionales está bien conocer las posibilidades que nos da CSS para tener un repertorio más amplio de opciones a la hora de desarrollar una web. Otra cosa es que nos guste y CSS es suficientemente potente para hacer locuras.

EJERCICIO 4

Vamos a hacer algo más del día a día: partiendo de un contenedor que ocupe el 100% de la pantalla (en alto y ancho) con una imagen de fondo y un título centrado... Tendremos que hacer que el título tenga una animación que lo haga entrar suavemente desde la parte superior del navegador y quedarse en el centro de su contenedor.