O Animate.css já existe há alguns anos e devo admitir que estou atrasado para a festa. Eu o descobri apenas alguns meses atrás, enquanto pesquisava na net alguns tutoriais de animação CSS e descobri qual deveria ser a maneira mais rápida e simples de animar, o Animate.css.
Criado por um cara chamado Dan Eden, o Animate.css é uma maneira rápida de ver como o CCS funciona e obter algumas ações de animação em seu site.
Descrito como 'Basta adicionar animação CSS de água', o Animate.css é um pouco divertido com um lado sério. Ele permite que até web designers amadores, como eu, entendam rapidamente os fundamentos da animação CSS e criem efeitos simples, mas eficazes, para sites. De um único título animado a movimentos mais envolvidos, esta ferramenta pode fazer isso.
Animate.css
O Animate.css está disponível para download no GitHub e é essencialmente uma biblioteca de efeitos CSS simples coletados em um único local. Cada animação é bem embalada e pronta para uso. Tudo o que você precisa fazer é encontrar a animação que você gosta e aplicar a classe. Isso é realmente tudo o que existe.
Você não precisa baixar a biblioteca inteira se não quiser, pois existem 2.500 linhas de código nela. Você pode visitar o site Animate.css, encontrar uma animação e clicar no link Download Animate.css. Carrega a classe em uma página da web para você copiar e usar como achar melhor.
No entanto, é mais fácil usar o GitHub e detalhar para encontrar o efeito que você está procurando.
- Navegue para a página css do GitHub.
- Clique no link Origem para acessar a lista de elementos.
- Selecione o tipo de efeito que você está procurando na lista. O bounce é um candidato a atenção, então selecione o link
- Selecione bounce.css.
- Copie o código e coloque-o na sua página para aplicar a animação.
É realmente muito simples. Você obviamente selecionaria opções diferentes para os diferentes efeitos, mas o resultado final é o mesmo. Acesso ao código necessário para realizar o trabalho pesado na página.
Criando um objeto animado com o Animate.css
Construir algo bacana com o Animate.css é simples. É apenas uma questão de encontrar o código CCS e adicioná-lo ao seu próprio CSS. Se eu posso fazer isso, qualquer um pode!
A primeira opção na página Animate.css é rejeitada, portanto, use-a neste exemplo.
- Colar ' ' dentro na sua folha de estilo.
- Encontre o CSS para a animação desejada e adicione-o ao elemento que deseja animar. Por exemplo, adicione ' 'para adicionar esse efeito de rejeição ao teste, uma imagem ou qualquer outra coisa.
- Adicione o seguinte código CSS para fazer tudo funcionar. Retirado do bounce.css acima.
@keyframes bounce {
de 20%, 53%, 80% para {
função de tempo de animação: bezier cúbico (0, 215, 0, 610, 0, 355, 1.000);
transformar: translate3d (0, 0, 0);
}
40%, 43% {
função de tempo de animação: bezier cúbico (0, 755, 0, 050, 0, 855, 0, 060);
transformar: translate3d (0, -30px, 0);
}
70% {
função de tempo de animação: bezier cúbico (0, 755, 0, 050, 0, 855, 0, 060);
transformar: translate3d (0, -15px, 0);
}
90% {
transformar: translate3d (0, -4px, 0);
}
}
.pulo {
nome da animação: rejeição;
transformação-origem: parte inferior central;
}
Aprimorando a animação com o Animate.css
A sequência acima adiciona um efeito de rejeição quando a página é carregada pela primeira vez, o que é legal, mas é algo único. Que tal adicioná-lo ao pairar. Dessa forma, sempre que alguém passa o mouse sobre o teste, ele salta. Não é algo que eu faria em um site de produção, mas é uma ótima maneira de demonstrar como tudo funciona.
Adicione o seguinte código ao seu CSS para adicionar o efeito de rejeição ao passar o mouse. Toda vez que o mouse passa o mouse sobre o elemento, ele deve saltar.
.animated: pairar {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animação-duração: 1s;
-o-animação-duração: 1s;
duração da animação: 1s;
-webkit-animation-fill-mode: ambos;
-moz-animation-fill-mode: ambos;
-ms-animation-fill-mode: ambos;
-o-animação-modo de preenchimento: ambos;
modo de preenchimento de animação: ambos;
}
Se você conhece CSS, saberá muito melhor do que eu sobre como implementar efeitos diferentes para ações diferentes. Como iniciante, isso e as bibliotecas fornecidas no Animate.css me ajudam a criar animações básicas, mas eficazes, para minhas páginas da web.
Não sei quantas eu usaria em um site ao vivo, pois elas nem sempre caem muito bem e os usuários de dispositivos móveis parecem não gostar muito deles. No entanto, como uma lição de como o CSS funciona e como ele pode ser usado para aprimorar a web, é um ótimo recurso. Eu sou apenas um iniciante, mas passar algumas horas com o Animate.css para este tutorial me ensinou muito. Acho que vou jogar muito mais antes de terminar. E quanto a você?
