HTML5 - Animationer

Animationer är effekter som övergångar men förbättrade i deras funktionalitet, i den meningen att det finns överlägsen kontroll över vad som kan göras, på grund av att det finns fler alternativ för att göra ändringar från en stil till en annan.
Animationsegenskaper
Som vi hade sagt tidigare är animationer förbättrade övergångar på grund av antalet alternativ och egenskaper som gör att vi kan ha större kontroll över dem, vi kommer att granska var och en av dem:

• animation-delay: Använd en viss tid för att kunna starta animationen när den är aktiverad.
• animationsriktning: Anger om animationen ska spelas bakåt eller i omväxlande cykler.
• animation-varaktighet: Anger det tidsintervall inom vilket animationen ska spelas.
• animation-iteration-count: Anger hur många gånger animationen måste upprepas och kan till och med placera värdet oändlig för oändliga upprepningar av detsamma.
• animationsnamn: Anger namnet på animationen.
• animation-play-state: Gör att animeringen kan pausas och sedan fortsätta spela.
• animation-timing-func: Ange hur mellanvärden ska behandlas i animationen
• animering: Det är genvägen med vilken vi kan integrera alla animationsegenskaper i en enda CSS -deklaration och har följande struktur:

animering:
Nu när vi känner till de tillgängliga egenskaperna, låt oss se en exempelkod för att analysera den:

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

I det här exemplet ser vi det vid tiden för att göra : sväva på elementet kommer vi att ha en fördröjning på 100 ms då kommer animationen att ha 500 ms att utföra och det kommer att upprepas ett oändligt antal gånger.
Sedan ser vi att med namnet vi gav applikationen kommer vi att använda fastigheten @nyckelbilder där kommer vi att berätta vilka element som ska animeras.
Låt oss se hur det ska se ut i vår webbläsare:

FÖRSTORA

Som vi ser är det en förändring i elementets bakgrund, sedan färgen på bokstaven och storleken på teckensnittet, i slutet av animationen återgår den till utgångsläget och hela processen upprepas igen, detta ger det en rörelse som inte existerar med användning av övergångar.
Med detta visar vi också vikten av animationsnamnet eftersom det fungerar som identifierare för att kunna tilldela det ett @nyckelbilder.
Med detta avslutar vi handledningen och med detta kan vi redan utföra grundläggande animationer för att ge mer rörelse åt våra dokument HTML.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng