10 herramientas de animación CSS3 que debes marcar

A medida que las personas tienden a percibir con mayor facilidad las cosas que se mueven, las animaciones utilizadas de manera inteligente pueden mejorar la experiencia del usuario de un sitio. Llamar la atención a los elementos importantes que los usuarios necesitan notar rápidamente..

CSS3 ha introducido una nueva sintaxis de animación que puede ayudarlo a lograr muchas cosas interesantes en sus diseños. Construir animaciones geniales a veces puede ser complicado y llevar mucho tiempo, sin embargo, es cuando las bibliotecas y los generadores de animación se pueden usar de manera excelente.

Echa un vistazo a algunas de las animaciones posibles con CSS:

38 inspiradoras demostraciones de animación en CSS3
15 hermosos efectos de texto creados con CSS
30 animaciones CSS interesantes que tienes que ver
Cómo crear el efecto de rebote con la animación CSS3

En esta publicación, veremos 10 herramientas brillantes que pueden hacer que crear tus propias animaciones sea más fácil y rápido..

1. CSS3Gen CSS3 generador de animación

CSS3Gen le proporciona un generador de animación fácil de usar que le permite generar rápidamente animaciones básicas. Aunque no hará obras de arte complicadas con esta herramienta, es una excelente opción si desea crear una animación estándar sin demasiados problemas..

Tú No tienes que ensuciarte las manos con el código, como puede configurar las propiedades en un formulario, haga una vista previa del resultado, luego simplemente copie y pegue el código en su propio archivo CSS.

2. CSS animate

Si tu necesito animaciones mas complicadas, Puedes encontrar CSS animar útil. Tiene una IU más madura, puede establecer un poco más de propiedades y puede seguir, detener y reiniciar la animación con la ayuda de una línea de tiempo intuitiva..

También hay animaciones de ejemplo, tales como “Rebotar”, “Sacudir”, y “Oscilación”, que puede cargar en el generador y modificar el código según sus necesidades.

3. Generador de animación CSS envolvente

EnvolviendoEl generador de animación es probablemente la mejor opción. Si eres nuevo con las animaciones CSS3., Y quiero entender rápidamente cómo funcionan. Esta herramienta simple pero poderosa le permite probar los diferentes tipos de animaciones que CSS3 tiene para ofrecer, y comprobar fácilmente cuál es la diferencia entre ellas..

Solo tiene que configurar 4 parámetros: tipo de animación, función de animación, duración en segundos, y si la animación es infinita. Cuando esté listo, solo tiene que obtener y obtener el código HTML y CSS generado.

4. animaciones mágicas

Animaciones magicas es una biblioteca CSS genial que hace posible Coloca fácilmente animaciones con efectos especiales. en tu sitio. Por ejemplo, puede hacer que los elementos desaparezcan, se abran hacia la izquierda o hacia la derecha, luego vuelvan, giren hacia abajo, hacia arriba, hacia la izquierda o hacia la derecha, y muchos otros.

Todo lo que tienes que hacer es descargar el código, incluir el archivo CSS en tu página HTML y agregar la clase apropiada con la ayuda de jQuery de la siguiente manera:

 $ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn'););

También puede cambiar la configuración del temporizador y hacer que la animación sea infinita con la ayuda de jQuery (para más detalles, consulte el archivo Léame).

5. animate.css

Animate.css le proporciona un conjunto de Animaciones CSS3 geniales, en todos los navegadores. Las animaciones se dividen en grupos como buscadores de atención, entradas rebotantes, salidas rebotantes, entradas descoloridas y muchas otras, por lo que realmente no puede quejarse de la falta de opciones..

Puede descargar el código de Github, luego solo tiene que agregar el archivo CSS a su página HTML, y las clases de CSS relevantes a los elementos HTML que desea animar..

6. Bounce.js

Bounce.js es una útil biblioteca de JavaScript que te permite crear animaciones complicadas. Bounce.js tiene una interfaz de usuario madura que le permite agregar diferentes componentes, como suavizado, duración, retraso y número de rebotes, manualmente a su animación, o seleccionar un ajuste preestablecido listo para usar, luego reproducir la animación, y afinar las propiedades si es necesario.

7. AniJS

AniJS es una biblioteca de JavaScript supercool que le permite agregar animaciones CSS3 a sus diseños y construir componentes de interfaz de usuario sofisticados como pestañas animadas, acordeones, modales, menús deslizantes, notificaciones de aplicaciones móviles, revelaciones de desplazamiento y mucho más.

Funciona con todos los navegadores modernos, incluyendo iOS y Android, no necesita bibliotecas de terceros, y tiene un escaparate espectacular llamado AniCollection donde puede experimentar fácilmente los diferentes efectos que proporciona la biblioteca..

8. Giradores de CSS de elemento único

¿Alguna vez has querido mejorar tus diseños con hilanderos de carga animados? Si la respuesta es afirmativa, esta linda biblioteca de CSS puede ser una excelente opción para usted. El código CSS para los hilanderos está escrito en MENOS. No hay ninguna configuración, el código está listo, solo tiene que insertarlo en sus propios archivos HTML y CSS.

9. cuentakilómetros

Cuentakilómetros es una herramienta brillante para coloque medidores animados en su sitio. Es una biblioteca de CSS y JavaScript, la parte de CSS está escrita en Sass, y puede elegir entre diferentes temas, como “Digital”, “Estación de tren”, y “Coche”.

Para usar Odometer, debe agregar el archivo JavaScript y el archivo de tema elegido a su página HTML, luego clase = "odómetro" Seleccione el elemento que desea convertir en un medidor animado. La opción ideal para representar visualmente los datos, o para hacer una “Próximamente” página más llamativa.

10. Snabbt.js

Snabbt.js Es una biblioteca de animación minimalista que te ayuda a mover cosas fácilmente. Si necesita un poco de inspiración, eche un vistazo a las demostraciones para ver qué puede lograr con esta herramienta de animación inteligente, la tabla periódica animada en la captura de pantalla a continuación es solo una de las muchas posibilidades que Snabbt.js hace que sea fácil de implementar.

Necesitas escribir un poco de JavaScript si quieres usar esta biblioteca, pero como el resultado es bastante espectacular, probablemente valga la pena..