Hvordan rotere animasjon i CSS

På nettet spiller animasjon en nøkkelrolle for å tiltrekke brukere. Det er mer sannsynlig at en bruker har interesse av et animert nettsted enn en statisk. Med bruk av CSS “animasjon”Eiendom, vi kan animere ethvert element. Denne egenskapen lar oss gjøre nettstedet mer attraktivt og elegant. Det endrer stilene til elementer gradvis.

I denne håndboken skal vi lære om roterende animasjoner i CSS.

Hvordan rotere animasjon i CSS?

Roterende animasjon gjør at et element kan endre utseendet i en midtperiode. For roterende animasjon, "animasjon”Eiendom til CSS brukes. Vi kan bruke denne egenskapen i et hvilket som helst element av HTML -lignende bilde, SVG, tekst og mange flere.

Nå vil vi diskutere følgende punkter:

• • Animasjonseiendom
  • Syntaks av animasjonseiendommer
  • Hvordan utføre en roterende animasjon ved hjelp av CSS?

Hvordan bruke "animasjon" -egenskaper i CSS?

“animasjon”Eiendom tillater endring av elementstil fra en til en annen. For dette, spesifiser animasjonsnavnet, hastigheten, animasjonstallet og rotasjonsretningen i henhold til følgende syntaks.

Syntaks

Animasjon: Animasjonsnavn Speed ​​Iteration-Count Direction;

• • Animasjonsnavn: Det representerer navnet på en animasjon (innebygd eller tilpasset (ved hjelp av nøkkelrammer)).
  • hastighet: Det brukes til å bremse og fremskynde animasjonen. For eksempel, "2s”(I to sekunder).
  • iterasjonstelling: Det angir hvor mange ganger du vil at animasjonen din skal fortsette.
  • retning: Den spesifiserer hvordan en animasjon vil spille, for eksempel fremover, bakover eller vekselvis.

Etter å ha forstått den grunnleggende syntaksen til animasjonsegenskaper, la oss hoppe inn i det praktiske arbeidet og forstå hvordan vi kan lage en roterende animasjon ved hjelp av CSS.

Eksempel: roterende bilde HTML -objekt i CSS

I HTML, skriv koden til elementet du vil rotere. Her vil vi rotere et SVG -ikon:

La oss bruke rotasjonsanimasjonen i CSS. Her, ".rotere”Brukes til å få tilgang til klassen som er tilordnet det valgte bildet som vi ønsker å rotere i CSS. Deretter vil vi sette bredden på bildet til “100px”Og roter den på 2 sekunder i et uendelig antall ganger i et lineært mønster. Imidlertid kan du endre hastighet, iterasjonstelling og retning i henhold til ditt valg:

.rotere
Bredde: 100px;
Animasjon: Rotasjon 2S uendelig lineær;

@Keyframes brukes til å definere start- og sluttpunktet for animasjonen (ved hjelp av "fra”Og“til”Nøkkelord). Angi dessuten animasjonsnavnet "rotasjon”Etterfulgt av @KeyFrames du vil animere. Siden vi ønsker å flytte animasjonen sirkulært, så bruk "rotere()”Funksjonen til transformasjonseiendommen som vi vil starte fra“0 grader”Og slutt på“359 grader”:

@KeyFrames rotasjon
fra
Transform: roter (0deg);

til
Transform: roter (359deg);

Etter implementeringen av CSS -koden, gå til HTML -filen og kjør den for å få følgende utfall:

Med bruk av “animasjon”Eiendom, vi har rotert et element over en definert periode.

Konklusjon

For å lage en roterende animasjon i CSS, bruk animasjonsegenskapen og angi verdien av animasjoner som varighet, retning og hastighet. Dessuten brukes Rotate () CSS -funksjonen for å rotere et element sirkulært i transformasjonsegenskapen. Denne artikkelen forklarte animasjonsegenskapen i detalj for å rotere en animasjon for et uendelig antall ganger.