¿Qué es una animación CSS?
Animación CSS que le permite animar elementos HTML usando solo clases CSS. No requiere JavaScript ni una instalación o configuración extensa.
Las animaciones CSS le permiten crear sitios web llamativos y elegantes, controles deslizantes paralelos, controles, efectos de desplazamiento animados, efectos 3D, animaciones de entrada y salida por elemento.
Aunque muchos marcos CSS tienen sus propias clases de animación CSS integradas, como Tailwind, muchos desarrolladores prefieren crear sus propias clases de animación o utilizar bibliotecas de animación CSS externas.
En esta publicación, le ofrecemos la mejor biblioteca y marco de animación CSS independiente que también son de código abierto y de uso gratuito en todo tipo de proyectos.
1-AnimXYZ
AnimXYZ le ayuda a crear, personalizar y componer animaciones para su sitio web. Desarrollado por variables CSS para permitir una cantidad casi ilimitada de animaciones únicas sin escribir un solo fotograma clave. Ahorra tiempo y ten control total sobre cómo se mueven tus elementos. Creado para Vue, React, SCSS y CSS, AnimXYZ le dará vida a su sitio web.
2- Animación CSS MÁGICA
magia es una pequeña biblioteca de animación CSS liviana que funciona en todos los navegadores modernos sin dependencias externas.
Magic ofrece animaciones fluidas y elegantes para eventos de entrada, salida, desplazamiento y clic.
3- Animar.css
Animar CSS es una excelente y rica biblioteca de animación CSS para agregar animaciones animadas a su sitio web.
animar.css es una biblioteca liviana, simple y rica de animaciones listas para usar en todos los navegadores para usar en sus proyectos web. Excelente para énfasis, páginas de inicio, controles deslizantes y sugerencias para guiar la atención.
4- Vivificar
Vivificar es una biblioteca CSS pura de código abierto y gratuita con docenas de animaciones sofisticadas que le permite agregar efectos sofisticados animados para cada elemento.
También puede controlar qué tan rápido desea su animación, personalizar el tiempo de la animación e incluso agregar infinitas clases para que su animación se ejecute hasta que se cierre la página.
5-Motos
Motus permite a los desarrolladores crear hermosas animaciones que simulan fotogramas clave CSS y se aplican cuando el usuario se desplaza. Puede crear animaciones desplazables en la página, paralaje de página y admite desplazamiento vertical y horizontal.
6- Esmirna
Esmirna es una mini biblioteca CSS que le permite crear rápidamente hermosos elementos de desplazamiento de imágenes. Equipado con una gran cantidad de clases de estilo y propiedades personalizadas, Izmir le permite un control total y posibilidades casi ilimitadas.
Simplemente cargue la biblioteca CSS en su proyecto, agregue el marcado del elemento combinado con las clases de estilo de su elección para crear de forma personalizada el efecto de desplazamiento de imagen perfecto.
Características de Esmirna
- Miles de combinaciones de estilos posibles
- 20 efectos de borde animados
- 9 efectos de imagen animada
- 12 efectos de texto animados
- Clases de estilo de superposición
- Clases de retardo de animación.
- clases de diseño de texto
- Colección de propiedades personalizadas para personalizar aún más el estilo de su elemento
- Ancho del borde
- margen fronterizo
- Color del borde
- Color primario
- Color secundario
- Color de texto
- Opacidad al pasar el cursor sobre la imagen
- Color de la imagen al pasar el cursor
- Degradado de desplazamiento de imagen
- Accesible (se activa el cursor sobre el foco)
- Tamaño mínimo de archivo (2 KB comprimidos en formato Gzip)
- Documentación completa
7- Mímica.css
Imitar es una biblioteca de animación CSS simple con increíbles conjuntos de animaciones, que no requiere ninguna dependencia externa y funciona sin problemas en todos los navegadores.
Mimic.css se lanza como código abierto bajo la licencia MIT.
8- Toda la animación.css
Toda la animación.css es un conjunto de animaciones CSS agradables y locas creadas con el propósito de darle vida e interacciones a tu proyecto. Son animaciones para varios navegadores que darán más énfasis a sus páginas, como controles deslizantes y efectos de animación 3D.
9- Mecanografiado.css
Mecanografiado.css es un mixin de máquina de escribir completamente funcional para preprocesadores CSS, que actualmente admite SCSS y pronto también agregará soporte para Less y Stylus.
Typed.css admite múltiples cadenas, cadenas de varias líneas, velocidades variables, estilo por cadena, cursor de inserción animado (cursor de inserción parpadeante), pausa de escritura direccional y mucho más. ¡Es incluso accesible!
10- Gatillo
Desencadenar es una animación de biblioteca CSS para proyectos JavaScript, que puede instalar e incrustar fácilmente directamente en su proyecto.
Si conoce alguna otra biblioteca de código abierto que nos perdimos, háganoslo saber.
Etiquetas
Desarrollo web basado en web Lista CSS Diseño de código abierto
