Pagina inicial » Kit de ferramentas » Wicked CSS - Uma nova biblioteca de animação Hot no Pure CSS3

    Wicked CSS - Uma nova biblioteca de animação Hot no Pure CSS3

    Graças ao CSS3, você pode criar algumas animações malucas na web. Estes podem trabalhar em todos os navegadores e elementos de página para controlar itens de navegação, menus suspensos, guias, o nome dele.

    Na verdade, você pode até gerar esses códigos dinamicamente usando ferramentas de animação. Mas esses são bastante limitados em comparação com uma biblioteca de animações de pleno direito.

    Wicked CSS é a mais nova biblioteca do gênero. Isso me lembra do início Animate.css que era razoavelmente simples e rudimentar, ainda poderia ser usado em praticamente qualquer site.

    Dê uma olhada na página inicial para uma demonstração ao vivo, juntamente com uma lista de todas as animações suportadas. Ao escrever este artigo eu conto 24 estilos de animação total de slides para rotações e efeitos pulsantes / saltantes.

    Muitas dessas animações são recursos únicos usados ​​para exibir um elemento (ou fora de exibição). Isso é útil para páginas com animações de rolagem para visualização que segmentam elementos de página específicos.

    Mas você também pode use isso para mostrar (ou ocultar) itens extras da página como menus suspensos, barras de pesquisa, formulários de inscrição ocultos ou qualquer outra coisa. Aqui está uma pequena lista de animações que você pode escolher:

    • Mexe
    • Zoom in / out
    • Deslize para cima / baixo
    • Desvanecer-se
    • Rolando dentro / fora
    • Bounce e pop
    • Rotação circular in / out

    Todos esses estilos de animação são projetados para um único uso. Eles podem ser chamados várias vezes por página e por elemento, mas estes não estão repetindo animações.

    Em vez disso, você os usará com base no efeito de clicar, passar o mouse ou percorrer de um usuário. Eles também podem ser usados ​​nos botões do CTA para efeitos pulsantes / latejantes, mas isso requer uma função de temporização do JavaScript.

    Dê uma olhada na página de exemplos para uma visualização ao vivo e mais alguns detalhes. Você também encontrará documentação completa no site principal junto com o repositório do GitHub.

    O Wicked CSS é uma nova biblioteca, por isso ainda não tem muitos seguidores. Mas a biblioteca é estável e é provável que esteja por aí por muitos anos.