post #2659
Criando efeito de animação simples com CSS
Publicado em: 26/03/2023 / Atualizado em: 26/03/2023
Para criar um efeito de animação simples com CSS, você pode usar a propriedade “animation”. Essa propriedade permite criar animações personalizadas e definir como elas serão executadas.
Aqui está um exemplo de como criar um efeito de animação que faz uma imagem girar em loop:
HTML:
<img class="rotate" src="minha-imagem.jpg">
CSS:
.rotate {
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}Neste exemplo, a classe “rotate” é aplicada a uma imagem e a propriedade “animation” é usada para definir uma animação chamada “spin”. A animação “spin” é criada usando a regra “@keyframes”, que define as etapas da animação. No caso deste exemplo, a animação começa com a imagem girando 0 graus e termina com ela girando 360 graus.
A propriedade “animation” tem quatro valores:
- animation-name: o nome da animação (neste exemplo, “spin”).
- animation-duration: a duração da animação em segundos (neste exemplo, 2 segundos).
- animation-timing-function: como a animação progride ao longo do tempo (neste exemplo, “linear” significa que a animação ocorre de forma constante).
- animation-iteration-count: quantas vezes a animação deve ser executada (neste exemplo, “infinite” significa que a animação deve ser executada continuamente).
Com essas propriedades, você pode criar uma ampla variedade de efeitos de animação, desde simples rotações até transições mais complexas.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=2659
ID de Referência: 2659
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.