Rotación Infinita

Para crear una rotación continua y sin interrupciones, combinamos dos propiedades clave de las animaciones CSS: infinite y linear.

¿Por qué "Linear"?

Por defecto, las animaciones CSS usan "ease", que comienza lento, acelera y frena al final. Para un engranaje mecánico, queremos una velocidad constante para que el ciclo sea indetectable.

La Mecánica

check_circle Infinite: Asegura que el contador de iteraciones de la animación nunca se detenga.
check_circle 360 Grados: El estado final del keyframe debe completar un círculo completo para volver perfectamente a 0.

lightbulb Tip Pro Usa will-change: transform; para informar al navegador que el elemento se animará, lo que puede mejorar el rendimiento en SVGs complejos.

animation.css

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.gear-icon {
  animation: spin 3s linear infinite;
  will-change: transform;
}

Vista Previa en Vivo

settings