post
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:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/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.