Cómo rotar continuamente una imagen usando CSS

Cómo usar animaciones CSS para rotar continuamente una imagen

Mientras construye elReact Handbookpágina de destino, tuve que buscar cómo rotar una imagen. Quería rotar unSVGimagen, pero esto funciona para cualquier tipo de imagen. O cualquier elemento HTML, en realidad.

Agregue esta instrucción CSS al elemento que desea rotar:

animation: rotation 2s infinite linear;

También puede optar por agregar unrotateclass a un elemento, en lugar de apuntarlo directamente:

.rotate {
  animation: rotation 2s infinite linear;
}

ajustar el2spara ralentizar o acelerar el período de rotación.

Luego agregue esta línea, fuera de cualquier selector:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

¡Eso es! Tus elementos ahora deberían rotar.

Revisar laAnimaciones CSSyTransiciones CSSguías

Aquí está el resultado que se muestra en Codepen:

Ver la plumaCómo usar animaciones CSS para rotar continuamente una imagenpor Flavio Copes (@flaviocopios) enCodePen.

Tech Wiki Online!