Crea animaciones CSS geniales fácilmente con animista

Existen toneladas de aplicaciones web de animación CSS en línea. Pero, muy pocos en comparación con el nivel de detalle y la facilidad de uso que se obtiene con Animista.

Esta aplicación web gratuita te permite Genere animaciones CSS personalizadas con el clic de un botón.. Usted selecciona entre movimientos prediseñados, como diapositivas, transformaciones, cambios e incluso animaciones de sombras..

Una vez que hayas creado tu animación, puedes exportar el código Al igual que con otros generadores de CSS. Excepto, este código es mucho más fácil de trabajar e incluso viene con una herramienta minificadora incorporada.

La interfaz puede parecer confusa al principio, pero eso es solo por la cantidad de opciones que tiene!

Construyes animaciones personalizadas siguiendo tres pasos principales y usando la interfaz de arriba a abajo:

1. Elige un estilo de movimiento (swing, slide, flip-scale) desde los círculos en la parte superior
2. Personalízalo con diferentes tipos de movimiento. debajo
3. Edita tus opciones de animación en la barra de opciones del lado izquierdo flotante

A través de este proceso, puede cambiar la duración total de la animación, el estilo de suavizado, el retraso, prácticamente todo. Y todo Funciona a través de CSS3 puro., lo que lo hace aún más impresionante.

También tenga en cuenta que en la barra de navegación superior puede elegir entre diferentes tipos de estilos de animación de destino.

los por defecto es “BASIC” que puede funcionar en casi cualquier cosa (desplazamiento, clic o animación inmediata). Otros objetivos incluyen texto de página, animaciones de fondo e incluso animaciones de entrada personalizadas para mostrar un elemento de página oculto.

Me gusta especialmente el “atención” enlace en la parte superior que tiene algunos efectos geniales de vibración y vibración para los estilos de botones. Estos funcionan bien en los botones de CTA para captar la atención y fomentar las interacciones del usuario..

Una vez que hayas terminado de hacer ajustes, simplemente haga clic en el pequeño icono de soporte en la esquina superior derecha del panel de vista previa.

Esto trae una nueva página a la vista con tu clase de animación CSS completa, junto con los fotogramas clave. Las características opcionales le permiten minimizar el código y incluir el auto-prefijo que soporta navegadores web más antiguos.

He usado toneladas de herramientas de animación CSS personalizadas y, sin duda, Animista es la herramienta más rica en funciones que existe. Es totalmente gratuito y un poco complejo al principio, pero una vez que entiendes la interfaz, es el mejor generador que puedes usar..

Para probarlo, simplemente visite la página de inicio y haga clic en “Pruébame”. También puede compartir sus pensamientos y felicitaciones con el creador de la aplicación web @ ana108.