Gracias a las animaciones, transiciones y transformaciones CSS, podemos mejorar la usabilidad de nuestros sitios web creando movimientos efectistas y graduales, que mejorarán notablemente la experiencia del usuario.

Este post es un resumen que recopila varios de mis artículos acerca del tema. Te recomiendo que leas cada entrada detenidamente.

¿Por qué utilizar animaciones, transiciones y transformaciones CSS en nuestras webs?

• Sólo necesitas conocimientos sobre HTML y CSS para elaborarlas.
• No se requiere de Jquery u otras librerías.
• La mayoría de navegadores soportan animaciones, transiciones y transformaciones.

Si quieres más información sobre el soporte en los diferentes navegadores, aquí tienes este post: Soporte en navegadores de animaciones y transiciones CSS

¿Qué son las transiciones CSS?

Las transiciones CSS se crean gracias a la propiedad transition. Transition nos permite que cualquier cambio en un elemento de nuestra web: color, anchura, padding, opacidad… sea gradual.

Más info sobre el tema Transiciones CSS, manual básico.

¿Qué son las animaciones CSS?

Las animaciones CSS, al igual que las transiciones, crean movimientos y cambios graduales en los elementos de nuestra página. La principal diferencia es, que una animación CSS tiene estados o frames (tantos como queramos) y por ello, son más complejas que las transiciones.

Para trabajar con animaciones debemos utilizar la propiedad animation, y definir los frames (o estados) de la animación con la regla @keyframes

Más información sobre el tema: Crear una animación con CSS

Animaciones vs Transiciones ¿qué diferencias existen?

Las principales diferencias entre ambas son las siguientes:

1. Las transiciones suelen utilizarse con algún evento hover, generalmente en botones, enlaces y menús.
2. Las transiciones sólo tienen dos estados; inicio y final, mientras que una animación, puede tener tantos estados o frames como queramos y pueden ser mucho más complejas.
3. Las transiciones sólo se pueden reproducir una vez (cuando el evento :hover o similar se inicia), sin embargo, en las animaciones podemos especificar el número de veces qué queremos reproducir nuestra animación, desde una vez hasta infinitas.

En este post tiene toda la información sobre todas las diferencias entre animation y transition: Animaciones y transiciones CSS, diferencias.

¿Qué son las transformaciones CSS?

Con CSS3 podemos modificar cualquier objeto de nuestra web a través de la propiedad transformation. Existen transformaciones en 2D y 3D.

Las funcionalidades para crear transformaciones 2D que vamos a encontrar son: Ejemplos e información de transformaciones en CSS3

¿Más información sobre este tema?

Si te gustaría dominar estas propiedades de CSS te animo a que te inscribas en mi curso: Experto en animaciones, transciones y transforamaciones 2D en CSS. Tienes más info sobre este curso aquí.