Cómo rotar la animación en CSS

En la web, la animación juega un papel clave para atraer a los usuarios. Es más probable que un usuario tenga interés en un sitio web animado que uno estático. Con el uso del CSS "animaciónPropiedad, podemos animar cualquier elemento. Esta propiedad nos permite hacer que el sitio web sea más atractivo y elegante. Cambia los estilos de elementos gradualmente.

En este manual, vamos a aprender sobre animaciones giratorias en CSS.

Cómo rotar la animación en CSS?

La animación giratoria permite que un elemento cambie su apariencia durante un período central. Para la animación giratoria, el "animaciónSe utiliza la propiedad de CSS. Podemos aplicar esta propiedad en cualquier elemento de HTML como imagen, SVG, texto y muchos más.

Ahora, discutiremos los siguientes puntos:

• • propiedad de animación
  • Sintaxis de la propiedad de animación
  • Cómo realizar una animación giratoria usando CSS?

Cómo usar la propiedad de "animación" en CSS?

El "animación"La propiedad permite cambiar el estilo de elemento de uno a otro. Para esto, especifique el nombre de la animación, la velocidad, el recuento de animación y la dirección de la rotación de acuerdo con la siguiente sintaxis.

Sintaxis

Animación: dirección de conteo de iteración de velocidad de nombre de animación;

• • nombre de animación: Representa el nombre de una animación (incorporado o personalizado (usando cuadros de teclas)).
  • velocidad: Se usa para reducir la velocidad y acelerar la animación. Por ejemplo, "2S"(Durante dos segundos).
  • Conteo de iteración: Denota cuántas veces quieres que tu animación continúe.
  • dirección: Especifica cómo se reproducirá una animación, como hacia adelante, hacia atrás o alternativamente.

Después de comprender la sintaxis básica de la propiedad de animación, saltemos al trabajo práctico y comprendamos cómo crear una animación giratoria usando CSS.

Ejemplo: objeto HTML de imagen giratoria en CSS

En html, escriba el código del elemento que desea rotar. Aquí rotaremos un icono SVG:

Aplicemos la animación de rotación en CSS. Aquí el ".girar"Se usa para acceder a la clase asignada a la imagen seleccionada a la que queremos rotar en CSS. A continuación, estableceremos el ancho de la imagen en "100px"Y gírelo en 2 segundos para un número infinito de veces en un patrón lineal. Sin embargo, puede cambiar la velocidad, el contenido de iteración y la dirección según su elección:

.girar
Ancho: 100px;
Animación: Rotación 2S Infinite Lineal;

El @Keyframes se usa para definir el punto de inicio y finalización de la animación (usando "de" y "a"Palabras clave). Además, proporcione el nombre de la animación "rotación"Seguido de @Keyframes a los que quieres animar. Dado que queremos mover la animación circularmente, así que use el "girar()"Función de la propiedad de transformación en la que comenzaremos"0 grados"Y termina en"359 grados":

@Keyframes Rotation
de
transformar: rotar (0deg);

a
transformación: girar (359deg);

Después de la implementación del código CSS, vaya al archivo HTML y ejecútelo para obtener el siguiente resultado:

Con el uso del "animación"Propiedad, hemos girado con éxito un elemento durante un período definido.

Conclusión

Para crear una animación giratoria en CSS, use la propiedad de animación y establezca el valor de animaciones como duración, dirección y velocidad. Además, la función de rotación () CSS se está utilizando para rotar un elemento circularmente en la propiedad de transformación. Este artículo explicó la propiedad de animación en detalle para rotar una animación para un número infinito de veces.