Animação de rotação infinita de CSS: como girar um ícone continuamente

Para obter rotação infinita de um ícone usando CSS, uma combinação de animações CSS e quadros-chave são obrigatórios. As etapas a seguir descrevem a solução:

1. Adicionar quadros-chave:

Definimos dois quadros-chave, um para o início da rotação (0 graus) e outro para o final (360 graus). Isso garante uma transição suave.

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

2. Aplicar animação:

Aplicamos a animação do quadro-chave criado ao elemento que queremos girar usando a propriedade de animação CSS. Esta propriedade requer três parâmetros: o nome do quadro-chave, a duração e o comportamento do loop (infinito).

  Rotate

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

3. Corrigir problemas de compatibilidade do navegador:

Para garantir a compatibilidade entre diferentes navegadores, incluímos prefixos de fornecedores para navegadores baseados em WebKit (Chrome, Safari) e propriedades padrão para outros navegadores.

.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}

Seguindo essas etapas, você pode criar facilmente animações de rotação infinita para ícones e outros elementos usando CSS.