post

Criando efeito de animação simples com CSS

Publicado em: 26/03/2023 / Atualizado em: 26/03/2023

Categorias: BlogCSS

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:

  1. animation-name: o nome da animação (neste exemplo, “spin”).
  2. animation-duration: a duração da animação em segundos (neste exemplo, 2 segundos).
  3. animation-timing-function: como a animação progride ao longo do tempo (neste exemplo, “linear” significa que a animação ocorre de forma constante).
  4. 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.

Bruno Devs News


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.

Clique aqui e entre em contato


Comentários