HTML5 - Animationer

Animationer er effekter som overgange, men forbedret i deres funktionalitet, i den forstand at der er overlegen kontrol over, hvad der kan gøres, på grund af tilgængeligheden af ​​flere muligheder for at foretage ændringer fra en stil til en anden.
Animation egenskaber
Som vi tidligere havde sagt, er animationer forbedrede overgange på grund af antallet af muligheder og egenskaber, der giver os mulighed for at have større kontrol over dem, vi vil gennemgå hver af dem:

• animation-forsinkelse: Anvend et bestemt tidspunkt for at kunne starte animationen, når den er aktiveret.
• animationsretning: Angiver, om animationen skal afspilles baglæns eller i skiftende cyklusser.
• animation-varighed: Angiver det tidsinterval, hvor animationen skal afspilles.
• animation-iteration-count: Angiver antallet af gange animationen skal gentages, og kan endda placere værdien uendelig for uendelige gentagelser af det samme.
• animationsnavn: Angiver navnet på animationen.
• animation-play-state: Tillader, at animationen sættes på pause, og derefter fortsætter afspilningen.
• animation-timing-func: Angiv, hvordan mellemværdier skal behandles i animationen
• animation: Det er den genvej, hvormed vi kan inkorporere alle animationsegenskaberne i en enkelt CSS -erklæring og har følgende struktur:

animation:
Nu hvor vi kender de tilgængelige egenskaber, lad os se en eksempelkode for at analysere den:

 Eksempel
Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.

I dette eksempel ser vi det på tidspunktet for at gøre : svæve på elementet vil vi have en forsinkelse på 100 ms, så vil animationen have 500 ms til at udføre, og det vil blive gentaget et uendeligt antal gange.
Så ser vi, at med det navn, vi gav applikationen, vil vi bruge ejendommen @keyframes det er her, vi vil fortælle dig, hvilke elementer der skal animeres.
Lad os se, hvordan det skal se ud i vores browser:

FORSTØRRE

Som vi ser, er der en ændring i elementets baggrund, derefter farven på bogstavet og skrifttypens størrelse, i slutningen af ​​animationen vender den tilbage til den oprindelige tilstand, og hele processen gentages igen, dette giver det en bevægelse, der ikke eksisterer ved brug af overgange.
Med dette demonstrerer vi også vigtigheden af ​​animationsnavnet, da det fungerer som identifikator for at kunne tildele det et @keyframes.
Hermed afslutter vi selvstudiet, og med dette er vi allerede i stand til at udføre grundlæggende animationer for at give mere bevægelse til vores dokumenter HTML.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt