HTML5 - Animasjoner

Animasjoner er effekter som overganger, men forbedret i funksjonalitet, i den forstand at det er overlegen kontroll over hva som kan gjøres, på grunn av tilgjengeligheten av flere alternativer for å gjøre endringer fra en stil til en annen.
Animasjonsegenskaper
Som vi hadde sagt tidligere, er animasjoner forbedrede overganger på grunn av antall alternativer og egenskaper som gjør at vi kan ha større kontroll over dem, vi skal gå gjennom hver av dem:

• animasjonsforsinkelse: Bruk et bestemt tidspunkt for å starte animasjonen når den er aktivert.
• animasjonsretning: Angir om animasjonen skal spilles bakover eller i vekslende sykluser.
• animasjon-varighet: Angir tidsintervallet som animasjonen skal spilles av.
• animasjon-iterasjon-telling: Angir antall ganger animasjonen må gjentas, og kan til og med plassere verdien uendelig for uendelige gjentakelser av det samme.
• animasjonsnavn: Angir navnet på animasjonen.
• animasjon-spill-tilstand: Tillater at animasjonen settes på pause og fortsetter å spille.
• animasjon-timing-func: Angi hvordan mellomverdier skal behandles i animasjonen
• animasjon: Det er snarveien som vi kan inkorporere alle animasjonsegenskapene i en enkelt CSS -erklæring og har følgende struktur:

animasjon:
Nå som vi kjenner de tilgjengelige egenskapene, la oss se en eksempelkode for å analysere den:

 Eksempel
Det er mange forskjellige frukttyper - det er over 500 varianter av bananer alene. Når vi legger til de utallige typer epler, appelsiner og annen kjent frukt, står vi overfor tusenvis av valg.

I dette eksemplet ser vi det når vi gjør det : sveve på elementet vil vi ha en forsinkelse på 100 ms, så vil animasjonen ha 500 ms å utføre, og det vil gjentas et uendelig antall ganger.
Så ser vi at med navnet vi ga applikasjonen vil vi bruke eiendommen @keyframes der vil vi fortelle deg hvilke elementer som skal animeres.
La oss se hvordan det skal se ut i nettleseren vår:

FORSTØRRE

Som vi ser er det en endring i elementets bakgrunn, så fargen på bokstaven og skriftstørrelsen, på slutten av animasjonen går den tilbake til utgangstilstanden, og hele prosessen gjentas igjen, dette gir den en bevegelse som ikke eksisterer ved bruk av overganger.
Med dette demonstrerer vi også viktigheten av animasjonsnavnet siden det fungerer som identifikator for å kunne tilordne det a @keyframes.
Med dette fullfører vi opplæringen, og med dette kan vi allerede utføre grunnleggende animasjoner for å gi mer bevegelse til dokumentene våre HTML.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng