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 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
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
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
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 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
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 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
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
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
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
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
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.
Un comentario
Los comentarios están cerrados.