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.