Las animaciones CSS ofrecen tres ventajas importantes frente a las técnicas de animación tradicionales basadas en scripts:
- Son sencillas de usar para animaciones simples, ni siquiera hace falta saber JavaScript para hacerlas.
- Incluso con una carga del sistema moderada, las animaciones funcionan bien. En JavaScript, las animaciones simples suelen ir mal. Para que el rendimiento sea lo más fluido posible, el motor de renderizado puede saltarse fotogramas y aplicar otras estrategias.
- Dejar que el navegador regule la secuencia de animación le permite mejorar el rendimiento y la eficiencia, por ejemplo limitando la frecuencia de actualización de las animaciones en las pestañas que no están visibles.
Aunque la mayoría de las animaciones se pueden hacer con CSS puro, puedes recurrir a bibliotecas y frameworks de animación para conseguir mejores resultados en menos tiempo.
1️⃣ Animate.css – Animaciones CSS de Daniel Eden
2️⃣ Anime.js – Anime.js es una biblioteca de animación JavaScript ligera, con una API sencilla pero potente. Funciona con propiedades CSS, SVG, atributos del DOM y objetos JavaScript.
3️⃣ CSShake – CSShake hace exactamente lo que promete: es una biblioteca CSS pensada específicamente para sacudir los elementos de tu página web.
4️⃣ Hover.css – Hover.css es una biblioteca de animación CSS pensada para botones y otros elementos de interfaz de tu sitio web.
5️⃣ AniJS – AniJS es una biblioteca de animaciones que te permite añadir animaciones a los elementos con una estructura sencilla, parecida a una frase.
6️⃣ Animista – Animaciones CSS a la carta
7️⃣ Tachyons Animate – Tachyons es una biblioteca CSS atómica con un montón de clases utilitarias que permiten diseñar cualquier cosa añadiendo solo las clases que necesitas.
8️⃣ Sequence.js – Sequence.js es una biblioteca JavaScript que aporta un framework CSS responsive para crear sliders, presentaciones, banners y otras aplicaciones basadas en pasos.
9️⃣ Infinite – Estas animaciones, como las rotaciones y los pulsos, están pensadas para funcionar y repetirse de forma infinita.
🔟 OBNOXIOUS.CSS – Animaciones para los fuertes de corazón y los débiles de espíritu
1️⃣1️⃣ MOTION UI – Una biblioteca Sass para crear transiciones y animaciones CSS flexibles.
1️⃣2️⃣ Keyframes.app – Una interfaz gráfica para generar animaciones CSS personalizadas por keyframes.
1️⃣3️⃣ AnimXYZ – AnimXYZ te ayuda a crear, personalizar y componer animaciones para tu sitio web. Diseñada para Vue, React, SCSS y CSS.
1️⃣4️⃣ Whirl – ¡Animaciones de carga en CSS con el mínimo esfuerzo!
1️⃣5️⃣ Hamburgers – Hamburgers es una colección de sabrosos iconos de hamburguesa animados en CSS. El código fuente se incluye también como biblioteca Sass. Es modular y personalizable, así que prepárate tu propia hamburguesa.
