Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Estas constan de dos componentes. Por un lado, tenemos al estilo que describe la animación, y por otro al conjunto de fotogramas que indican su estado inicial y final.
Las animaciones CSS tienen algunas ventajas como que son bastante sencillas de hacer si se las compara a las de las técnicas tradicionales por scripts y por ello, si utilizamos unas fuentes de recursos bien interesantes y de calidad, el trabajo será incluso más fácil. De todas formas, lleva su tiempo y pueden ser bien difíciles, por lo que estas fuentes de recursos os pueden venir muy bien.
Función Easing
Esta especifica la velocidad de la animación para hacerla más realista. Se abre el cajón, se le da aceleración y finalmente se le frena. Cuando algo cae, primero baja rápidamente para terminar rebotando. Podrás encontrar la función deseada en esta página de easing.net. Lo mejor es que está en nuestro idioma para que te sea más fácil manejarte con este sitio web.
Animate.css
Dan Eden ha compilado una librería de animaciones CSS de gran belleza que puedes usar en tus proyectos. El proyecto en si es una gran fuente de inspiración.
Animate Plus
Stripe es bien conocido por sus páginas de producto que tienen una gran calidad en todas las animaciones que posee. Una de sus mentes creativas que se encuentra detrás de esas animaciones es Benjamin De Cock, que ha creado una librería de animación CSS y SVG que rinde muy bien y es ligera en peso; perfecta para lo mobile.
Hover.css
Un recurso similar a Animate.css, Hover.css es una colección de efectos CSS que los tienes de forma libre para usar como quieras en tus proyectos. Se centra en los efectos hover para enlaces, botones, imágenes y más.