Come ruotare l'animazione in CSS

Sul web, l'animazione svolge un ruolo chiave per attirare gli utenti. È più probabile che un utente abbia un interesse per un sito Web animato rispetto a uno statico. Con l'uso del CSS "animazione"Proprietà, possiamo animare qualsiasi elemento. Questa proprietà ci consente di rendere il sito web più attraente ed elegante. Cambia gradualmente gli stili di elementi.

In questo manuale, impareremo su animazioni rotanti in CSS.

Come ruotare l'animazione in CSS?

L'animazione rotante consente a un elemento di cambiare la sua apparizione per un periodo centrale. Per l'animazione rotante, il "animazione"Viene utilizzata la proprietà di CSS. Possiamo applicare questa proprietà in qualsiasi elemento di HTML come immagine, svg, testo e molti altri.

Ora discuteremo dei seguenti punti:

• • Proprietà dell'animazione
  • Sintassi della proprietà dell'animazione
  • Come eseguire un'animazione rotante usando CSS?

Come usare la proprietà "animazione" in CSS?

IL "animazione"La proprietà consente di cambiare lo stile dell'elemento dall'uno all'altro. Per questo, specificare il nome di animazione, la velocità, il conteggio delle animazioni e la direzione di rotazione in base alla seguente sintassi.

Sintassi

Animazione: direzione dell'iterazione della velocità di animazione;

• • animazione: Rappresenta il nome di un'animazione (integrato o personalizzato (utilizzando keyframe)).
  • velocità: È usato per rallentare e accelerare l'animazione. Per esempio, "2s"(Per due secondi).
  • COUNT ITERAZIONE: Indica quante volte vuoi che la tua animazione continui.
  • direzione: Specifica come giocherà un'animazione, come in avanti, all'indietro o alternativamente.

Dopo aver compreso la sintassi di base della proprietà dell'animazione, passiamo al lavoro pratico e comprendiamo come creare un'animazione rotante usando CSS.

Esempio: immagine rotante oggetto HTML in CSS

In HTML, scrivi il codice dell'elemento che vuoi ruotare. Qui ruoteremo un'icona SVG:

Applichiamo l'animazione di rotazione in CSS. Qui, il ".ruotare"Viene utilizzato per accedere alla classe assegnata all'immagine selezionata a cui vogliamo ruotare in CSS. Successivamente, imposteremo la larghezza dell'immagine su "100px"E ruotalo in 2 secondi per un numero infinito di volte in un modello lineare. Tuttavia, puoi cambiare la velocità, il conteggio iterazione e la direzione secondo la tua scelta:

.ruotare
larghezza: 100px;
Animazione: rotazione 2s infinito lineare;

@KeyFrames viene utilizzato per definire il punto di partenza e finale dell'animazione (usando "da" E "A"Parole chiave). Inoltre, fornire il nome di animazione "rotazione"Seguito dai @KeyFrames a cui vuoi animare. Dal momento che vogliamo spostare l'animazione circolare, quindi usa "ruotare()"Funzione della proprietà Transform in cui inizieremo da"0 gradi"E finisci a"359 gradi":

@KeyFrames Rotazione
da
trasformazione: rotare (0deg);

A
Trasformazione: ruotare (359DEG);

Dopo l'implementazione del codice CSS, vai al file HTML ed eseguilo per ottenere il seguente risultato:

Con l'uso del “animazione"Proprietà, abbiamo ruotato con successo un elemento per un periodo definito.

Conclusione

Per creare un'animazione rotante in CSS, utilizzare la proprietà dell'animazione e impostare il valore di animazioni come durata, direzione e velocità. Inoltre, la funzione CSS rote () viene utilizzata per ruotare un elemento circolare nella proprietà di trasformazione. Questo articolo ha spiegato in dettaglio la proprietà dell'animazione per ruotare un'animazione per un numero infinito di volte.