Stylie - Um construtor de animação Web CSS grátis

Se você luta com a sintaxe CSS3 e quer um maneira simples de criar animações Estilista é uma ótima ferramenta para salvar.

Este é um dos muitos livre geradores de código com foco em efeitos animados CSS puro. O Stylie é totalmente gratuito e de código aberto, hospedado no GitHub e alimentado por uma biblioteca de quadros-chave chamada Rekapi.

A biblioteca de Rekapi usa JavaScript, então é uma alternativa ao CSS puro. E felizmente, o aplicativo da Web Stylie suporta ambos os métodos, para que você possa código de exportação em CSS puro ou JavaScript.

Por padrão, a primeira página carrega uma demonstração de animação contínua com uma animação linear. Você pode brincar com isso editando o configurações padrão no Guia Movimento ou editando o Separador Keyframes.

Na lista de quadros-chave, você pode adicionar novos quadros-chave, editar sua duração total, e mudar os estilos de animação, incluindo movimentos baseados no eixo X / Y.

Primeiro, isso vai parecer extremamente confuso, especialmente se você nunca fez animação de quadro-chave antes. No entanto, quanto mais você joga com este aplicativo, mais faz sentido.

Por padrão, você terá uma tonelada de diferentes opções de flexibilização para mexer e todos eles são super fáceis de personalizar.

o Gráfico de movimento é muito mais difícil de aprender, mas lhe dá muito mais controle sobre a animação. Stylie até deixa você salvar efeitos de movimento personalizados e reutilize estes na guia Keyframes para outras animações.

Se eu pudesse reclamar de uma coisa, é o aplicativo da web falta de design responsivo.

Não consegui que o aplicativo inteiro coubesse na tela do meu MacBook Pro de 13 polegadas, mesmo com o navegador totalmente maximizado. Isso pode ser um problema, pois a página não tem uma barra de rolagem vertical e muitas opções (como o código exportado) são encontradas mais baixo no painel de configurações.

Mas, além desse pequeno aborrecimento, consegui que funcionasse bem no meu monitor maior. E a qualidade de exportação é como nada mais que você encontrará na web.

Dê uma olhada no aplicativo Stylie para ver como ele funciona e tente brincar com algumas das opções. Depois de fazer sua animação, você pode exportar o CSS ou o JavaScript e usar isso para qualquer projeto que você goste.

Se você está tendo problemas para aprender a interface, você também pode assistir a este breve tutorial, com cerca de 9 minutos de duração, cobrindo todos os principais recursos..