As animações no CSS permitem que você controle a velocidade de uma animação quando há mudanças de propriedades CSS. Em vez de uma propriedade entrar em vigor imediatamente, você pode fazer com que as mudanças em uma propriedade ocorram durante um período de tempo.
Neste artigo, exploraremos as animações CSS, com exemplos práticos e dicas úteis.
Exemplo de uma Animação CSS
Vamos começar com um exemplo simples de animação CSS. Suponha que temos um elemento com a classe .my-element e queremos mudar sua cor de fundo de azul para vermelho quando o mouse passa sobre ele. Podemos fazer isso com a seguinte regra CSS:
.my-element {
background-color: blue;
animation-name: changeColor;
animation-duration: 2s;
}
@keyframes changeColor {
from {background-color: blue;}
to {background-color: red;}
}
.my-element:hover {
animation-play-state: running;
}Neste exemplo, a cor de fundo do elemento muda de azul para vermelho em 2 segundos quando o mouse passa sobre ele.
As Propriedades de Animação CSS
A propriedade animation do CSS pode ser dividida nas seguintes sub-propriedades:
animation-name: define o nome da animação que vai controlar os frames.animation-delay: define quanto tempo aquela animação vai durar.animation-direction: define como a animação deve se comportar ao final de sua execução.animation-duration: Configura o tempo que uma animação deveria levar para completar um ciclo.animation-iteration-count: Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.animation-play-state: Permite que você pause e inicie 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 depois de se executar.
Propriedades que Você Pode Animar Usando Animações CSS
Você pode animar quase todas as propriedades CSS com transições e animações CSS. No entanto, nem todas as propriedades são boas candidatas para animação. Por exemplo, animar a propriedade width pode causar uma reorganização do layout, o que pode ser caro em termos de desempenho. Em vez disso, considere animar propriedades que não afetam o layout, como transform e opacity.
Conclusão
As animações CSS são uma ferramenta poderosa para adicionar interatividade e dinamismo às suas páginas da web. Com um pouco de prática, você pode criar efeitos visuais impressionantes e melhorar a experiência do usuário em seu site.
E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!
