Rotación infinita con animación CSS

Las animaciones CSS permiten crear una amplia gama de efectos visualmente atractivos sin necesidad de JavaScript. Gracias a las funciones modernas de CSS, los desarrolladores pueden implementar transiciones fluidas, efectos de movimiento complejos e incluso animaciones sorprendentemente avanzadas que mejoran la experiencia del usuario.

Una técnica sencilla pero eficaz consiste en crear un elemento que gire infinitamente. Este tipo de animación se puede usar para destacar partes específicas de una página, como iconos, indicadores de carga o elementos interactivos. Se utiliza con frecuencia en el diseño de interfaces de usuario para indicar procesos en curso o para añadir un toque dinámico sutil a contenido estático.

Implementar la rotación continua con CSS es bastante sencillo. Mediante animaciones de fotogramas clave y la aplicación de una transformación de rotación, se puede hacer que un elemento gire sin fin en el sentido de las agujas del reloj. La velocidad, la duración y la fluidez de la animación se pueden ajustar fácilmente para que coincidan con el diseño del sitio web.

En este ejemplo, crearemos una sencilla animación de rotación infinita utilizando solo CSS. Este enfoque mantiene la solución ligera, eficiente y fácil de integrar en cualquier proyecto sin dependencias adicionales.

CSS

.rotate-clockwise {
  animation-name: clockwise;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

La clase CSS .rotate-clockwise se puede escribir en una línea.

.rotate-clockwise {
  animation: 3s linear infinite clockwise;
}

Si necesita girar en sentido antihorario, esto también es fácil de hacer.

CSS

.rotate-counterclockwise {
  animation-name: counterclockwise;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes counterclockwise {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

Puedes ver un ejemplo de código funcionando en Codepen: https://codepen.io/igorrybalko/pen/XJrLRvg