css recursos

Bibliotecas de animación CSS y herramientas para poner las cosas en movimiento.

Crear animaciones CSS significativas y hermosas puede ser difícil y llevar mucho tiempo, pero afortunadamente, hay algunos recursos excelentes para ayudar a impulsar su proceso creativo. Esta colección de recursos incluye todas las mejores bibliotecas de animación CSS.

Elija uno que se adapte a su proyecto y comience de inmediato, o utilícelo como punto de partida para crear algo personalizado para su marca. También hay algunas hojas de cuna y atajos útiles para complementar su aprendizaje.

Si no estás seguro de lo que quieres crear, entonces, ¿por qué no mirar nuestras inspiradoras publicaciones de animaciones CSS para obtener algunas ideas?

Son recursos de animaciones css con ejemplos para modificar a tu gusto

01. animista

Animista

Animista es un parque de animación CSS

Animista es un tipo de área de juegos donde puedes editar y jugar con una colección de animaciones CSS pre-hechas. Luego copie el código de lo que desee, para usar en sus proyectos. Animista comenzó su vida como un proyecto paralelo para la desarrolladora front end Ana Travas, quien aún lo está desarrollando.

02. CSS3 Hoja de trucos de animación

CSS3 animación hoja de trucos

Explora esta colección de animaciones CSS3 preestablecidas, plug-and-play

Este útil proyecto ofrece un conjunto de animaciones predefinidas, plug-and-play para que las uses en tus proyectos web. Hay instrucciones claras para ayudarlo a comenzar, pero básicamente, solo agrega la hoja de estilo a su sitio web y aplica las clases de CSS pre-hechas a los elementos que desea animar. Esta hoja de trucos utiliza los fotogramas clave de CSS3, lo que significa que no tiene que preocuparse por colocar el elemento para hacer espacio para las animaciones.

03. animate.css

animate.css

Esta biblioteca incluye 76 animaciones CSS esenciales.

Esta biblioteca reúne no menos de 77 animaciones, todas creadas en CSS y listas para usar. Simplemente haga referencia al archivo CSS y cuando agregue clases a un elemento, la animación sucederá. Esto funciona mejor al agregar o eliminar clases usando JavaScript.

La biblioteca es un tamaño de archivo impresionantemente pequeño cuando está comprimido y comprimido, pero si no quiere cargar todo en su sitio, el proyecto también es una gran fuente de inspiración. Compilada por Dan Eden, esta biblioteca incluye casi todas las animaciones CSS que pueda necesitar, desde lo básico (rebotar, atenuar) hasta algo más emocionante (Jack in the Box, Jello). Use el menú desplegable en la página de inicio para ver el título de la biblioteca animada en cada uno de los diferentes estilos.

04. Hover.css

Hover.css

Hover.css se centra en animaciones de interacción de botones

Similar a Animate.css, Hover.css es una colección de efectos CSS que puedes usar en tus proyectos. Esta biblioteca fue creada específicamente para animaciones de interacción de botones. La biblioteca se puede descargar en vainilla CSS, Sass o Less, por lo que encajarán en casi cualquier proyecto. La biblioteca tiene casi todas las animaciones que puede necesitar para la interacción.

05. CSShake

CSShake

CSShake se centra en agitar animaciones.

CSShake es una biblioteca de animaciones CSS dedicada a hacer temblar elementos. La biblioteca tiene una serie de clases que puede agregar a los elementos para aplicar una de las muchas animaciones de Shake diferentes. Las animaciones usan fotogramas clave y utilizan la propiedad de transformación para crear animaciones que a veces parecen locas, pero definitivamente difíciles de ignorar. Ahora también hay una biblioteca hermana, Reshake , que ofrece los efectos de vibración como un componente funcional React.

06. odioso.css

animación de CSS detestable

¿Quieres saber cómo no hacer animación CSS?

Obnoxious.css fue creado por Tim Holman y es exactamente como su nombre indica. La biblioteca explora lo que es posible con la animación CSS, pero ilustra perfectamente lo que no debes hacer con las animaciones CSS. Si bien se presenta como una biblioteca de animación lista para el producto (y lo es), se pretende que sea irónica. Prepárate.

07. Replainless.CSS

Replainless.CSS

Estas animaciones son súper rápidas.

Replainless.css es una biblioteca de animación CSS pequeña y liviana que se enfoca en crear animaciones que no causen un repintado desde el navegador (siempre que se usen correctamente). Al no requerir un reflujo o repintado, estas animaciones son súper rápidas y de gran rendimiento.

08. Animate Plus

animar más

Esta biblioteca de animación es ideal para sitios móviles

Stripe es bien conocido por sus páginas de productos bellamente animados. Uno de los autores intelectuales detrás de estos, Benjamin De Cock, ha creado una biblioteca de animaciones CSS y SVG con un rendimiento excelente y ligero, lo que la hace especialmente adecuada para dispositivos móviles.

09. UI de movimiento

Marcos de animación CSS

Animadores poderosos como Motion UI son herramientas CSS útiles

Esta biblioteca Sass de ZURB facilita la aplicación de animaciones personalizadas a su interfaz de usuario. Es un poco más complicado que algunas de las otras bibliotecas en esta lista, pero muy poderoso. Puede crear y modificar animaciones para satisfacer sus necesidades, y luego invocarlas utilizando JavaScript.

10. BounceJS

bouncejs

Utiliza esta herramienta para crear tu propia biblioteca de animaciones.

Esta es una herramienta útil si desea crear su propia biblioteca de animaciones. Tiene muchos ajustes preestablecidos divertidos y elimina el trabajo pesado de escribir código de animación complejo. Utiliza las operaciones de transformación avanzadas para crear las animaciones, que luego pueden agregarse a su propio archivo CSS de animación y aplicarse como desee.

11. GreenSock Animation Platform

Plataforma de animación GreenSock

Ve más allá con GreenSock

GSAP es un marco de animación de JavaScript. Si está creando animaciones más complejas (como en banners o imágenes de héroe), GSAP ofrece un conjunto de herramientas para manejar la reproducción, la interpolación SVG y más. Esto es genial si quieres ir más allá de lo que se puede hacer en las animaciones CSS, pero presenta un poco de una curva de aprendizaje. Para obtener más información, consulte nuestra guía de GSAP .

12. Funciones de aceleración cheatsheet

Funciones de facilitación

Las funciones de aceleración son más fáciles con esta hoja de trucos

Las funciones de tiempo especifican la tasa de cambio a lo largo del tiempo, y este sitio lo ayuda a elegir el adecuado para su animación o transición. Cuenta con una galería con curvas de Bézier donde puede previsualizarlas y copiar rápidamente el código.


One Thought on “12 grandes recursos de animación CSS”

Comments are closed.