> Faqs > Cómo animar un elemento con CSS para que gire de manera constante

Cómo animar un elemento con CSS para que gire de manera constante

Quiero hacer una animación CSS muy sencilla en la que un elemento está rotando de manera constante.

Quiero conseguir con CSS que un elemento esté siempre dando vueltas (rotando, girando) con una ainmacion infinita. ¿Cómo puedo proceder?

Respuestas

Si quieres conseguir que un elemento HTML gire continuamente necesitas animarlo con CSS. Es una tarea sencilla pero requiere un par de pasos.

Comenzarás por definir la animación de rotación. PAra ello necesitas un par de estilos CSS: primero debes usar @keyframes para especificar cómo cambia la animación a lo largo del tiempo. Para tu caso particular tienes que hacer una transformación de rotación (rotate) de 0 grados a 360 grados.

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

Como segundo paso debes aplicar la animación al elemento. Esto es muy sencillo también, simplemente tienes que indicar los @keyframes definidos en la propiedad 'animation' sobre el elemento HTML que deseas que gire. Con la propiedad animation debes indicar el nombre de la animación, la duración de la animación (un ciclo), y por último el modo de repetición (en este caso debe de ser infinito).

Puedes ver este código CSS:

.elemento-rotando {
  animation: girar 2s linear infinite;
}

Puedes ajustar la duración de la animación para que sea más o menos rápida.

Finalmente tendrás que aplicar la clase CSS que hemos creado, que se llama 'elemento-rotando' al elemento en particular que debes animar.

<div class="elemento-rotando">Este elemento gira infinitamente</div>

Espero que esto te valga.

Alfredo
163 5 11 6