Rotación infinita con animación CSS

Un elemento que gira infinitamente en un sitio web es una forma interesante de atraer la atención del usuario. Es bastante fácil implementar un elemento de este tipo mediante CSS. Aquí hay un ejemplo de código CSS para una rotación infinita en el sentido de las agujas del reloj.

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