Como criar animação com CSS
No post de hoje vamos ensinar como utilizar animações em CSS. Com apenas algumas linhas você vai inserir efeitos em sua html sem precisar utilizar JS (JavaScript).
Existem três vantagens-chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:
- São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
- As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem ser normalmente executadas precariamente em JavaScript (exceto caso sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter o desempenho mais estável possível.
- Deixando o navegador controlar a sequência de animação permite ao navegador otimizar o desempenho e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.
Passo 1 – Configurar a animação
Para criar uma animação primeiramente você precisa estilizar o elemento desejado com a propriedade “animation” ou sua sub-propriedades. Após adicionar a propriedade no elemento, você deverá definir o comportamento dela e isso vamos ensinar no próximo passo.
As sub-propriedades são:
animation-delay: configura o delay entre o tempo em que o elemento é carregado e o início da sequência de animação.
animation-direction: configura se a animação deve ou não alternar a direção em cada execução durante a sequência, ou voltar ao ponto inicial e se repetir.
animation-duration: configura o tempo que uma animação deveria levar para completar um ciclo.
animation-iteration-count: configura o número de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
animation-name: especifica o nome da regra com parênteses (at-rule) @keyframes at-rule descrevendo os keyframes da animação.
animation-play-state: permite você pausar e resumir a sequência da animação.
animation-timing-function: configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
animation-fill-mode: configura que valores são aplicados pela animação antes e após se executar.
Passo 2 – Usando keyframes para definir as sequências de animação.
Como informado anteriormente, agora vamos precisar definir o comportamento da animação. E nada melhor que exemplificar para entender o uso da regra com o keyframes. Vamos ao exemplos.
Você pode testar esses exemplos que serão passados nesta ferramenta: Bfotool.
Começamos criando o elemento desejado:
<p>
SoloWeb: tudo que você precisa em soluções tecnológicas para seu negocio.
</p>Como você pode observar, inserimos uma frase dentro da tag “p” é aí que vamos trabalhar a animação.
Agora vamos definir a duração da animação e o nome dela, dentro do css:
p {
animation-duration: 3s;
animation-name: slidein;
}
E por último vamos agora definir o comportamento da animação com a propriedade keyframes.
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
Praticamente disse para meu elemento vir deslizando da direita para esquerda.
Você pode adicionar mais comportamento nessa keyframes, veja esse exemplo:
75% {
font-size: 300%;
margin-left: 10%;
width: 75%;
}Nesse exemplo pedi que enquanto a animação percorre seu percurso de 3s o elemento irá aumentar a fonte em 300% perto da margin final com 75% do tamanho do container, isso a 75% do percurso feito. O código completo ficará assim:
<html>
<style>
p {
animation-duration: 5s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
75% {
font-size: 300%;
margin-left: 10%;
width: 75%;
}
}
</style>
<body>
<p>
SoloWeb: tudo que você precisa em soluções tecnologicas para seu negócio.
</p>
</body>
</html>
Passo 3 – Adicionando outras propriedades
Neste terceiro e último passo vamos adicionar mais algumas propriedades/comportamento em sua animação:
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}Aqui falei que a keyframe sempre estará interagindo, praticamente o comportamento de um gif.
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}Informei que o keyframe irá mover-se de forma alternada. Vamos ver o resultado?
Agora com o pouco que você aprendeu, poderá aplicar em suas páginas da web, não deixe de acompanhar nosso blog com dicas e novidades da área.
E lembrando que a SOLOWEB além de oferecer Hospedagem de Sites, Servidores Dedicados, Servidores VPS com o menor custo do Brasil, também desenvolve soluções de software e realiza gerenciamento e monitoramento de servidores para sua empresa, faça uma cotação sem custo, acesse: www.soloweb.com.br
