Como girar a animação no CSS

Na web, a animação desempenha uma função fundamental para atrair usuários. É mais provável que um usuário tenha interesse em um site animado do que um estático. Com o uso do CSS “animaçãoPropriedade, podemos animar qualquer elemento. Esta propriedade nos permite tornar o site mais atraente e elegante. Muda os estilos de elementos gradualmente.

Neste manual, vamos aprender sobre as animações rotativas no CSS.

Como girar a animação no CSS?

A animação rotativa permite que um elemento mude sua aparência para um período central. Para animação rotativa, o “animação”A propriedade do CSS é usada. Podemos aplicar esta propriedade em qualquer elemento de html como imagem, SVG, texto e muito mais.

Agora, discutiremos os seguintes pontos:

• • propriedade de animação
  • Sintaxe da propriedade de animação
  • Como realizar uma animação rotativa usando CSS?

Como usar a propriedade "Animação" no CSS?

O "animação”Propriedade permite alterar o estilo de elemento de um para outro. Para isso, especifique o nome da animação, velocidade, contagem de animação e direção de rotação de acordo com a seguinte sintaxe.

Sintaxe

Animação: Direção da contagem de iteração de velocidade do nome da animação;

• • nome de animação: Representa o nome de uma animação (embutida ou personalizada (usando o KeyFrames)).
  • velocidade: É usado para desacelerar e acelerar a animação. Por exemplo, "2s”(Por dois segundos).
  • Contagem de iteração: Ele denota quantas vezes você deseja que sua animação continue.
  • direção: Ele especifica como uma animação será tocada, como para a frente, para trás ou alternadamente.

Depois de entender a sintaxe básica da propriedade de animação, vamos entrar no trabalho prático e entender como criar uma animação rotativa usando CSS.

Exemplo: Rotativo Objeto HTML em CSS

Em HTML, escreva o código do elemento que deseja girar. Aqui vamos girar um ícone SVG:

Vamos aplicar a animação de rotação no CSS. Aqui o ".girar”É usado para acessar a classe atribuída à imagem selecionada à qual queremos girar no CSS. Em seguida, definiremos a largura da imagem como “100px”E gire -o em 2 segundos para um número infinito de vezes em um padrão linear. No entanto, você pode alterar a velocidade, a contagem de iteração e a direção de acordo com sua escolha:

.girar
Largura: 100px;
Animação: rotação 2s infinita linear;

O @KeyFrames é usado para definir o ponto de partida e final da animação (usando “de" e "para" palavras-chave). Além disso, forneça o nome da animação “rotação”Seguido pelos @KeyFrames aos quais você deseja animar. Como queremos mover a animação circularmente, use o “girar ()”Função da propriedade Transform na qual começaremos de“0 graus"E termina em"359 graus”:

@keyframes rotação
de
Transformar: girar (0deg);

para
Transformar: girar (359deg);

Após a implementação do código CSS, vá para o arquivo HTML e execute -o para obter o seguinte resultado:

Com o uso do “animaçãoPropriedade, giramos com sucesso um elemento durante um período definido.

Conclusão

Para criar uma animação rotativa no CSS, use a propriedade de animação e defina o valor de animações como duração, direção e velocidade. Além disso, a função CSS giration () está sendo usada para girar um elemento circularmente na propriedade Transform. Este artigo explicou a propriedade de animação em detalhes para girar uma animação para um número infinito de vezes.