¿Qué son las animaciones CSS3?

Las animaciones CSS3 son utilizadas cuando necesitas dar movimiento a un elemento dentro de una página web. Animar un elemento por medio de CSS entrega mayor control a diferencia de las transiciones CSS su principal diferencia es que en una animación puedes controlar estados intermedios basados en inicio, fin o porcentajes de tiempo transcurrido mientras que en una transición solo puedes interactuar con un estado inicial y final.

Un claro ejemplo para diferenciar estas dos propiedades puede ser un enlace o botón, cuando pasas el mouse sobre uno de ellos y cambia de un color a otro existe un tiempo de demora entre la transición inicial y final, lo anterior es una transición. Si este botón o enlace se mueve desde un punto a otro, amplía o reduce su tamaño, aplica una transformación en determinado tiempo entonces hablamos de una animación.

Ejemplo de una transición CSS3

Si te fijas en el efecto de encontrarse presionado al pasar el mouse el botón solo hemos cambiado su posición utilizando la propiedad "top" y reducido su sombra con "box-shadow", en CSS esto sería:

.boton-ejemplo {
color: #fff;
background-color: #08c;
box-shadow: 0 5px 0 #006394;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.boton-ejemplo:hover {
top: 3px;
box-shadow: 0 2px 0 #006394;
}

La propiedad "transition" es la que se encarga de asignar a qué propiedad se aplica (all), tiempo (.2s) y la curva de velocidad del efecto de transición (ease-in-out).

Ejemplo de una animación CSS3

Las animaciones funcionan de manera diferente, a continuación tomaremos un ejemplo basado en una muestra de w3schools

<div class="ejemplo-animacion"></div>
div.ejemplo-animacion {
width: 40px;
height: 40px;
background-color: red;
position: relative;
-webkit-animation-name: ejemplo; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes ejemplo {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:100px; top:0px;}
50% {background-color:blue; left:100px; top:100px;}
75% {background-color:green; left:0px; top:100px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Sintaxis Estándar */
@keyframes ejemplo {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:100px; top:0px;}
50% {background-color:blue; left:100px; top:100px;}
75% {background-color:green; left:0px; top:100px;}
100% {background-color:red; left:0px; top:0px;}
}

Como puedes ver el div cuadrado tiene una animación infinita utilizando la propiedad @keyframes determinamos tiempo, repetición, animación entre otras opciones que hacen posible que este elemento sea animado dentro de la página web.

Consejos para animaciones y transiciones CSS3

Crear tus propias animaciones tomará tiempo dependiendo de qué necesitas realizar, existen algunas librerías que serán útiles para esta labor, la más conocida es Animate.css

También puedes utilizar otras como:

Para mayor información puedes buscar en las propias páginas de aprendizaje CSS3 de W3Schools o Developer Mozilla