By CSS ha introducido nuevas técnicas que permiten elaborar animaciones más sofisticadas que pueden colaborar a no tener que recurrir a tecnologías como Javascript ó Flash.
CONCEPTO DE ANIMACIÓN CSS
El concepto de animación es un concepto que tiene cierta similitud con el concepto de transición CSS, pero que es más amplio y ofrece más posibilidades. Una animación es un efecto dinámico que cambia las propiedades de un elemento en el tiempo y que puede tener varios estados intermedios especificados. Una animación requiere al menos de dos estados: el estado inicial (from) y el estado final (to). No obstante, puede tener otros estados intermedios adicionales.
A continuación las diferencias entre transición y animación:
| Transición | Animación | |
| Uso básico | Cambio de estado inicial a final cuando usuario posiciona mouse encima de elemento | Cambio de estado inicial a otro final, pasando por varios estados intermedios diferentes si se desea y de ejecución espontánea si se desea |
| Ejecución espontánea fácil de codificar | No | Sí |
| Repetición espontánea durante cierto tiempo fácil de codificar | No | Sí |
| Repetición continua fácil de codificar | No | Sí |
| Ejecución hacia delante y hacia detrás fácil de codificar | No | Sí |
| Puede requerir uso de prefijos en ciertos navegadores | Sí | Sí |
Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:
- Son muy fácil usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
- La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien echas). El motor de renderizado puede usar técnicas de optimización como el «frame-skipping» u otras tecnicas para manteber que la animación se vea tan suave como sea posible.
- Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
En la actualidad las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.
Fuente: www.aprenderaprogramar.com