Crie Cool CSS Animations Facilmente com Animista

tem toneladas de aplicativos web de animação CSS on-line. Mas, muito poucos se comparam ao nível de detalhe e facilidade de uso que você obtém com Animista.

Este aplicativo da web gratuito permite que você gerar animações CSS personalizadas com o clique de um botão. Você seleciona entre movimentos pré-projetados, como slides, transformações, oscilações e até mesmo animações de sombreamento..

Depois de criar sua animação, você pode exportar o código assim como com outros geradores de CSS. Exceto, este código é muito mais fácil de trabalhar e até mesmo vem com uma ferramenta minidificadora embutida.

A interface pode parecer confusa no começo, mas isso é apenas por causa de quantas opções você tem!

Você cria animações personalizadas seguindo três etapas principais e usando a interface de cima para baixo:

1. Escolha um estilo de movimento (swing, slide, flip-scale) dos círculos no topo
2. Personalize-o com diferentes tipos de movimento por baixo
3. Edite suas opções de animação na barra de opções flutuante do lado esquerdo

Através deste processo, você pode alterar a duração total da animação, o estilo de atenuação, o atraso, praticamente tudo. E tudo isso funciona através de CSS3 puro, o que torna ainda mais impressionante.

Observe também no topo da barra de navegação você pode até escolher entre tipos diferentes de estilos de destino de animação.

o o padrão é “básico” que pode trabalhar em praticamente qualquer coisa (passar o mouse, clicar ou animação imediata). Outros alvos incluem texto de página, animações de fundo e até animações de entrada personalizadas trazer um elemento de página oculta à vista.

Eu gosto especialmente do “atenção” link no topo, que tem alguns efeitos legais de tremido e jitter para estilos de botão. Funcionam muito bem nos botões do CTA para chamar a atenção e incentivar as interações do usuário.

Quando terminar de fazer os ajustes, basta clique no ícone do pequeno colchete no canto superior direito do painel de visualização.

Isso traz uma nova página à vista com sua classe de animação CSS completa, junto com os quadros-chave. Recursos opcionais permitem que você minify o código e incluir o prefixador automático que suporta navegadores da web mais antigos.

Eu usei toneladas de ferramentas de animação CSS personalizadas e, sem dúvida, Animista é a ferramenta mais rica em recursos lá fora. É totalmente gratuito e um pouco complexo no começo, mas depois de entender a interface, é de longe o melhor gerador que você pode usar.

Para experimentar, basta visitar a página inicial e clicar “Me teste”. Você também pode compartilhar seus pensamentos e elogios com o criador do aplicativo da Web @ ana108.