10 ferramentas de animação CSS3 que você deve marcar

Como as pessoas tendem a perceber mais facilmente as coisas que se movem, as animações usadas de maneira inteligente podem aprimorar a experiência do usuário de um site chamando a atenção para elementos importantes que os usuários precisam rapidamente.

CSS3 introduziu uma nova sintaxe de animação que pode ajudá-lo a alcançar muitas coisas interessantes em seus projetos. Construir animações legais às vezes pode ser complicado e demorado, mas é quando bibliotecas e geradores de animação podem ser usados de maneira excelente.

Confira algumas das animações possíveis com CSS:

38 Demonstrações de Animação CSS3 Inspiradoras
15 belos efeitos de texto criados com CSS
30 Cool CSS Animations você tem que ver
Como criar o efeito de rejeição com animação CSS3

Neste post vamos dar uma olhada em 10 ferramentas brilhantes que podem tornar mais fácil e rápido criar suas próprias animações.

1. Gerador de Animação CSS3Gen CSS3

CSS3Gen fornece um gerador de animação fácil de usar que permite gerar rapidamente animações básicas. Embora você não crie obras de arte complicadas com essa ferramenta, é uma ótima opção se você deseja criar uma animação padrão sem muito esforço.

Você não tem que sujar as mãos com código, como você pode definir as propriedades em um formulário, visualize o resultado, simplesmente copie e cole o código em seu próprio arquivo CSS.

2. CSS Animate

Se vocês precisa de animações mais complicadas, você pode encontrar CSS Animate útil. Ele tem uma interface mais madura, você pode definir um pouco mais de propriedades e pode seguir, parar e reiniciar a animação com a ajuda de uma linha do tempo intuitiva.

Há também animações de exemplo, como “Pulo”, “Mexe”, e “Balanço”, que você pode carregar no gerador e modificar o código de acordo com suas necessidades.

3. Coveloping Gerador de Animação CSS

CovelopingO gerador de animação é provavelmente a melhor escolha se você é novo com animações CSS3, e quer entender rapidamente como eles funcionam. Esta ferramenta simples, mas poderosa, permite testar os diferentes tipos de animações que o CSS3 tem a oferecer e verificar facilmente qual é a diferença entre eles..

Você só precisa definir 4 parâmetros: tipo de animação, função de animação, duração em segundos e se a animação é infinita. Quando estiver pronto, você só precisa pegar e pegar o código HTML e CSS gerado.

4. Animações Mágicas

Animações Mágicas é uma biblioteca CSS legal que torna possível facilmente colocar animações com efeitos especiais no seu site. Por exemplo, você pode fazer os elementos desaparecerem e desaparecerem, abrir para a esquerda ou para a direita, depois voltar, girar para baixo, para cima, para a esquerda ou para a direita, e muitos outros

Tudo o que você precisa fazer é baixar o código, incluir o arquivo CSS na sua página HTML e adicionar a classe apropriada com a ajuda do jQuery da seguinte maneira:

 $ ('. yourdiv') hover (function () $ (isso) .addClass ('magictime puffIn'););

Você também pode alterar as configurações do cronômetro e tornar a animação infinita com a ajuda do jQuery (para obter mais detalhes, consulte o arquivo leia-me).

5. Animate.css

Animate.css fornece-lhe um conjunto de cool, cross-browser animações CSS3. As animações são divididas em grupos, como os que procuram atenção, as entradas de salto, as saídas saltantes, as entradas de desvanecimento e muitas outras, portanto, você não pode reclamar da falta de escolha.

Você pode baixar o código do Github, então você só tem que adicionar o arquivo CSS à sua página HTML, e as classes CSS relevantes para os elementos HTML que você deseja animar.

6. Bounce.js

Bounce.js é uma biblioteca JavaScript útil que permite que você crie animações complicadas. Bounce.js tem uma interface de usuário madura que permite que você adicione componentes diferentes - como atenuação, duração, atraso e número de rejeições - manualmente à sua animação, ou selecione uma predefinição pronta para uso e, em seguida, reproduza a animação, e ajustar as propriedades se for necessário.

7. AniJS

AniJS é uma biblioteca JavaScript supercool que permite adicionar animações CSS3 aos seus designs e construir componentes de interface do usuário sofisticados como guias animadas, acordeões, modais, menus deslizantes, notificações de aplicativos móveis, revelações de rolagem e muito mais.

Ele funciona com todos os navegadores modernos, incluindo iOS e Android, não precisa de nenhuma biblioteca de terceiros e tem uma vitrine espetacular chamada AniCollection, onde você pode facilmente experimentar os diferentes efeitos fornecidos pela biblioteca..

8. Spinners CSS de elemento único

Você já quis melhorar seus projetos com spinners de carregamento animados? Se a resposta for sim, esta biblioteca spinner CSS pode ser uma excelente escolha para você. O código CSS para os spinners é escrito em menos. Não há configurações, o código está pronto, você só precisa inseri-lo em seus próprios arquivos HTML e CSS.

9. Odômetro

Odômetro é uma ferramenta brilhante para coloque medidores animados legais em seu site. É uma biblioteca CSS e JavaScript, a parte CSS é escrita em Sass, e você pode escolher entre diferentes temas, como “Digital”, “Estação de trem”, e “Carro”.

Para usar o Odometer, você precisa adicionar o arquivo JavaScript e o arquivo de tema escolhido à sua página HTML. class = "odometer" seletor para o elemento que você deseja transformar em um medidor animado. Escolha ideal para representar visualmente os dados ou para “Em breve” página mais atraente.

10. Snabbt.js

Snabbt.js é uma biblioteca de animação minimalista que ajuda-o a mover facilmente as coisas. Se você precisa de um pouco de inspiração, dê uma olhada nas demos para ver o que você pode conseguir com esta ferramenta de animação inteligente, a tabela periódica animada na tela abaixo é apenas uma das muitas possibilidades que o Snabbt.js torna fácil de implementar.

Você precisa escrever um pouco de JavaScript se quiser usar essa biblioteca, mas como o resultado é bastante espetacular, provavelmente vale a pena.