Animación de rotación CSS sin fin: cómo rotar un ícono continuamente

Para lograr una rotación infinita de un ícono usando CSS, se necesita una combinación de animaciones CSS y se requieren fotogramas clave. Los siguientes pasos describen la solución:

1. Agregar fotogramas clave:

Definimos dos fotogramas clave, uno para el inicio de la rotación (0 grados) y otro para el final (360 grados). Esto garantiza una transición fluida.

@-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 animación:

Aplicamos la animación de fotograma clave creada al elemento que queremos rotar usando la propiedad de animación CSS. Esta propiedad requiere tres parámetros: el nombre del fotograma clave, la duración y el comportamiento del bucle (infinito).

  Rotate

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

3. Corregir problemas de compatibilidad del navegador:

Para garantizar la compatibilidad entre diferentes navegadores, incluimos prefijos de proveedores para navegadores basados ​​en WebKit (Chrome, Safari) y propiedades estándar para otros 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 */
}

Al seguir estos pasos, puedes crear sin esfuerzo animaciones de rotación infinita para íconos y otros elementos usando CSS.