Stylie - Un generador gratuito de animación web CSS
Si luchas con la sintaxis CSS3 y quieres un Una forma sencilla de crear animaciones. Stylie es una gran herramienta para ahorrar.
Este es uno de los muchos gratis. generadores de código con un enfoque en puros efectos animados CSS. Stylie es totalmente gratuito y de código abierto, alojado en GitHub y alimentado por una biblioteca de fotogramas clave llamada Rekapi.
La biblioteca Rekapi usa JavaScript, Así que es una alternativa a CSS puro. Y afortunadamente, la aplicación web Stylie admite ambos métodos, por lo que puede Código de exportación en CSS puro o JavaScript.
De forma predeterminada, la primera página carga una demostración de animación continua con una animación lineal. Puedes jugar con esto editando el configuración por defecto en el Pestaña de movimiento o editando el Pestaña de fotogramas clave.
En la lista de fotogramas clave, puede añadir nuevos fotogramas clave, editar su duración total, y cambiar los estilos de animación, Incluyendo movimientos basados en el eje X / Y..
Primero, esto se verá extremadamente confuso, especialmente si nunca has hecho animación de fotogramas clave antes. Sin embargo, cuanto más juegues con esta aplicación, más sentido tendrá..
Por defecto, tendrás una tonelada de diferentes opciones de relajación para meterse con ellos y son súper fáciles de personalizar.
los Gráfico de movimiento es mucho más difícil de aprender pero te da mucho más control sobre la aceleración de la animación. Stylie incluso te deja guardar efectos de movimiento personalizados y reutilizar estos En la pestaña de fotogramas clave para otras animaciones..
Si pudiera quejarme de una cosa es de la aplicación web. falta de diseño responsivo.
No pude hacer que toda la aplicación se ajustara a la pantalla de mi MacBook Pro de 13 ", incluso con el navegador totalmente maximizado. Esto puede ser un problema ya que la página no tiene una barra de desplazamiento vertical y se encuentran muchas de las opciones (como el código exportado) más abajo en el panel de configuración.
Pero aparte de esta pequeña molestia, funcionó bien en mi monitor más grande. Y el calidad de exportación Es como ninguna otra cosa que encontrarás en la web..
Eche un vistazo a la aplicación Stylie para ver cómo funciona y pruebe a jugar con algunas de las opciones. Una vez que haces tu animación, puedes exportar el CSS o el JavaScript y úsalo para cualquier proyecto que te guste.
Si tiene problemas para aprender la interfaz, también puede ver este breve tutorial que abarca unos 9 minutos y abarca todas las funciones principales..
