Rotar animación en CSS

Ya sea para mejorar un botón, matar el tiempo mientras se carga la página o agregar un poco de estilo adicional a una página de destino, la animación es eficiente para mantener la atención de los lectores y deleitarlos en su sitio web.

Si bien existen varios métodos para agregar imágenes animadas a una página web, uno de los más simples es usar animaciones CSS, que requieren más que un poco de conocimiento de HTML y CSS para lograrlo.

Si desea emplear animaciones CSS en su trabajo, es bueno ver algunos ejemplos de animaciones CSS exitosas antes de comenzar. Este estudio adicional puede ayudarlo a obtener ideas para sus proyectos y mostrarle lo que puede hacer con esta característica vital.

Necesitará tres cosas para construir una animación CSS:

• Un elemento HTML para animar;
• Una regla CSS que conecta la animación a este elemento;
• Una serie de fotogramas clave especifican los estilos al principio y al final de la animación.

Las declaraciones, como la velocidad y el retraso, se pueden usar para adaptar aún más su animación. Ahora, veamos algunos ejemplos de animación de rotación en CSS.

Use animaciones CSS para rotar la imagen continuamente

Agregaremos el comando CSS al elemento que deseamos rotar en este ejemplo. Puede ajustar los 2s para ralentizar o acelerar la duración de la rotación y girar a 360 grados en animación.

Ejemplo:

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

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

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

Salida: la imagen se rotará 360 grados completos.

Necesitaremos algún marcado HTML que contenga una imagen y algunas propiedades para el siguiente ejemplo. Como puede ver, nuestro elemento de imagen tiene tres clases: rotate, linear, e infinite.

Cada clase requiere su bloque de declaración en nuestro CSS. En animación, gire a 360 grados y modifique los 2s para ralentizar o acelerar la duración de la rotación.

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

Salida: la imagen se rotará 360 grados completos.