Animationer på internet är inte nya. De har använts för att uppnå många mål, inklusive att göra något mer intressant att titta på eller ännu mer tilltalande. Ibland är det det som gör att en webbplats sticker ut bland konkurrenterna!
Animationer kan få UI-element att likna den verkliga världen, vilket gör att de smidigt förändras samtidigt som de ger känslan av kontinuitet, handling och framsteg, istället för att förändras på ett ögonblick.
Även när de tillämpas på små element kan animationer hjälpa användaren att komma ihåg om en åtgärd utfördes eller inte. Faktum är att användaren är mer benägna att komma ihåg vad han/hon just gjorde efter att ha uppfattat något förändras lite efter lite, istället för allt på en gång. En enkel animering för en laddningsskärm berättar mer än att bara vänta med en vit sida. Det är skillnaden mellan att veta att något fortfarande händer och att undra om sidan är trasig.
Det finns många olika sätt att skapa en animation på en webbsida. Du kan använda en färdig animering från en.gif-fil och använda den som en vanlig bild, vilket kan vara enkelt men kommer att göra att du förlorar möjligheten att ändra den animationen i koden. Manipulera HTML-element med JavaScript är en sak som också kan göras, men det är ofta lite för dyrt när det gäller beräkning. Känn dig fri att använda CSS och definiera flera stilar av ett element för att smidigt Förändring genom tiden. Det blir inte bara enklare utan gör det också möjligt för webbläsaren att optimera prestanda och effektivitet.
CSS erbjuder två olika typer av animationer. Den första är övergångsegenskap, som ofta används för svävningseffekter och andra användarinteraktioner. Den andra är animeringsegenskap, vilket gör det möjligt att skapa mer kontinuerliga animationer eller, som vi kommer att se senare, animationer med fler steg. Kolla exemplet på dessa två egenskapers effekter på codepen nedan (om du inte vet vad codepen är, kolla vår artikel om detta fantastiska verktyg för delning av kodavsnitt):
Se pennan typer av animationer av Patrícia Silva (@patsilva_tese) på KodPen.
För att göra enkla eller mer komplexa CSS-animationer är det nödvändigt att behärska två viktiga element: Timing av animering och Inre komponenter. En animering utan tidsassocierad är samma sak som att inte ha någon animering, eftersom den bara kommer att ändras direkt. Att använda inre komponenter kommer att göra livet enklare eftersom det är mycket mer sannolikt att behöva mer än ett element för att förbättra animationer. Låt oss kontrollera dem:
För att skapa en smidig animering eller övergång är det viktigt att definiera tidsgränser. På båda övergång och animering Fastigheter, vi har varaktighet, som säger hur mycket tid det tar att gå från början till slut, vilket definieras av den första tidsenheten (sekunder eller millisekunder). Sedan, de fördröjning, som bestämmer hur mycket tid elementet kommer att vänta innan animeringen startar, definieras av den andra tidsenheten.
Nedan finns fyra exempel som visar de flera effekter som olika värden kan skapa: två svävande effekter (en med en varaktighet på 0 sek och en annan 0,5 sek), tillsammans med två laddningseffekter (en med en fördröjning på 0 sek och en annan med 0,1 sek, 0,2 sek och 0,3 sek för var och en av rutorna).
Se pennan animering timing av Patrícia Silva (@patsilva_tese) på KodPen.
Den andra nyckelfaktorn och hemligheten för att göra mer sofistikerade animationer är användningen av inre komponenter. Om bara ett eller två extra element behövs, :före och :efter komponenter kan användas, precis som i provet nedan.
De kan utformas som vanligt på din CSS-fil, men det kommer inte att vara nödvändigt att definiera dem på HTML. Det kommer automatiskt att associera de extra elementen med huvudkomponenten och lämna HTML intakt. Den enda skillnaden i CSS är att du måste definiera fastighetsinnehåll representeras av en sträng. Som ett exempel är det som att beskriva texten i en div på HTML. Från exemplet med hover-effekt kontrollerar du nedan hur komponenten a:before utformades och en tom sträng användes på egenskapen content för att bara skapa det lilla hörnet.
Om animationen behöver mer än två extra element, standard HTML-komponenter kan användas. Ändra HTML-strukturen och införliva oformaterade komponenter som spännvidd, använd styling och använd sedan övergången eller animeringen. Användningen av flera komponenter är också användbar om du har olika typer av rörelser en gång varje komponent kan bara ta en animering eller övergång åt gången. Exemplet nedan visar laddningseffekten: det finns en div namngiven behållare med fyra spann inuti, och behållaren har en animering som gör att den blir större. Slutligen har varje spann en animering som får dem att rotera.
Så, hur genomförs en övergång? Det första du ska göra är att definiera en initial och slutlig stil/tillstånd för de involverade elementen, inklusive komponenterna:före och:after. Sedan, med hjälp av övergångsegenskap, det kommer att informera dessa komponenter hur de kommer att bete sig mellan de två staterna. Denna övergångsegenskap är sammansättningen av fyra andra egenskaper: övergångsfördröjning och övergångslängd (som är tidsrelaterade egenskaper och vi har redan täckt), övergångsegenskap och övergångs-tidsinställningsfunktion.
Se pennan övergångsegenskap av Patrícia Silva (@patsilva_tese) på KodPen.
Låt oss kolla vad dessa två sista egenskaper är och hur fungerar de:
Denna del av övergången gör det möjligt att ange vilka egenskaper som kommer att påverkas. Det kan ställas in på ”alla”, så alla egenskaper som ändras från en stil till en annan väljs. Men det kan också vara en specifik egenskap eller en uppsättning av dem. Detta är mycket användbart när du ställer in olika tidpunkter eller beteenden mellan elementets olika egenskaper. Om du till exempel vill att bakgrundsfärgen ska ändras mycket snabbare än textfärgen använder du:
Tidsfunktionen definierar övergångshastigheten och har en uppsättning möjliga värden:
Utforska hur dessa olika värden kan påverka en animering i exemplet nedan. Lägg märke till att övergången kan hålla reda på sig själv. Genom att flytta musen snabbt in och ut ur den animerade komponenten kommer animationen inte att gå hela vägen till slutet: den kommer att rulla tillbaka.
Se pennan övergångs-timing-funktion möjliga värden av Patrícia Silva (@patsilva_tese) på KodPen.
Till skillnad från övergångsegenskapen finns det inget behov av att ange de elementegenskaper som påverkas, och inte ens definiera ett initialt och sista tillstånd för animering. Egenskapen animation ger större frihet på grund av användning av nyckelbildrutor. Nyckelbildrutor bestämma komponentens olika utformning/tillstånd, med ett namn som senare kommer att användas på animeringsegenskapen. Med bara två tillstånd kan den användas ”från” och ”till” för att definiera de första och sista. Men om du vill ha mer kan det användas procentsatser och ange något som roterande animering på laddningseffekten.
Precis som övergångsegenskapen är animeringen också sammansättningen av andra egenskaper. De är: animeringslängd, animerings-fördröjning och animation-tid-funktion, som fungerar på samma sätt som övergångarna; animerings-namn, där namnet på nyckelbildrutan visas animering-iterationsräkning, för att bestämma hur många gånger animationen kommer att köras, vilket kan vara ett specifikt antal ”oändliga”; animations-riktning och animerings-fyllningsläge.
Den här egenskapen anger i vilken riktning animeringen måste återges på den markerade nyckelbildrutan, vilket gör det möjligt att välja ett av följande värden:
Se pennan animations-riktning av Patrícia Silva (@patsilva_tese) på KodPen.
Undrar du vad som händer med komponenten efter att animeringen är klar? Egenskapen animation-fill-mode har svaret på det. Detta värde berättar hur komponenten kan bete sig utanför animeringstiden, med andra ord före och efter animeringen:
Kontrollera resultatet av varje värde nedan. Klicka bara på någon av rutorna där animationen har en sekunds fördröjning och skillnaderna kommer att vara tydliga.
Se pennan JJKBDee av Patrícia Silva (@patsilva_tese) på KodPen.
Båda typerna av animationselementegenskaper kan nästan ändras, så länge de är representeras av enhetsvärden. Till exempel kommer du att kunna se en smidig övergång på färger, höjd- och breddvärden, marginaler och vadderingar, opaciteter, transformation etc. Du kommer dock inte att se den effekten på gränsstil, position, float, bakgrundsbild, teckensnittsfamilj, etc.
Även om enhets-/numeriska egenskaper kan ändras smidigt påverkar inte alla renderingsprocessen på samma sätt; vissa kan vara något tyngre än andra. När en webbläsare initierar en webbsida kommer den att gå igenom några steg: den första är Layout, den andra är Måla, och slutligen, Komposit. Om vi väljer att animera en egenskap som utlöser Layout, som bredd, kommer webbläsaren att upprepa färg och komposit. Av den anledningen används egenskaper som bara aktiverar det sammansatta steget, som omvandla och opacitet bör prioriteras. Du kan kontrollera fullständig lista över CSS-egenskaper och deras triggers.
Som nämnts tidigare är egenskapen transform en av de billigaste att animera. Detta betyder dock inte att det är en begränsad egendom. Faktum är att det tillåter att göra mycket av detta till elementet, inklusive:
Alla tidigare effekter kommer att tillämpas på elementets mitt såvida inte egenskapens transform-origo-värde ändras. Det värdet kan vara 1 eller 2 procentsatser eller till och med följande värden: topp, botten, höger, vänster och mitt.
Om du försökte utforska koden för några av tidigare animationer som visas här, du kanske märker att vi är använder inte egenskapen transform hela tiden. Det innebär dock inte att du inte kan göra samma animationer med bara transformationer. För att visa det, vi skapade båda effekterna med transform-egenskapen. Kolla nedan alla ändringar som behövs; du kommer att bli förvånad över hur lätt det är att göra samma effekt utan att ändra HTML-strukturen.
Se pennan tidigare animationer med transform av Patrícia Silva (@patsilva_tese) på KodPen.
Animationer gjorda genom JavaScript hanteras på huvudgänga i webbläsaren där layouten och målningen också händer. CSS animationer, beroende på egenskaperna som ändras, kan förekomma i en separat tråd som kallas kompositörtråd. Om webbläsaren tar mer tid på mer krävande uppgifter kommer huvudtrådens animationer att äventyras och avbrytas, medan kompositörer inte påverkas och kommer att fortsätta fungera smidigt. Så om du väljer Javascript är det mer troligt att du saknar ramar på dina animationer.
Sammanfattningsvis bör det vara en prioritet att göra animationer med CSS och transform-egenskapen. De är lätta att göra, särskilt för dem som redan får kläm på det och vet exakt vilka mål som ska uppnås. Ändå är det viktigt att vara försiktig med animationens överdrivna användning eftersom det kan leda till prestandaproblem och orsaka en överväldigande situation för användaren.
Webbutvecklare med en speciell kärlek till front-end. Mamma till katter. Jag försöker hjälpa till att rädda planeten på min fritid genom att dela miljövänliga alternativ.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
