CSS-animationer

Det finns många program där du kan redigera, skapa montage eller till och med skapa animationer, varje gång finns det många programvaror som lägger till den här typen av interaktiva projekt. I det här inlägget kommer vi inte bara att introducera dig till animationernas värld, utan vi kommer också att presentera dig för en ny vän.

Som du väl vet är datorvärlden full av kommandon och användbara verktyg för utveckling av webbsidor eller onlinemedia, som för närvarande existerar samexisterande. Stanna hos oss och upptäck i den här nya handledningen ett annat sätt att öka din nivå med datoranvändning och interaktivitet.

Vad är animationer?

Vi vill att du ska gå in i handledningen helt, men för detta är det nödvändigt att gå in i animationsvärlden eller vad det gäller grafisk design, världen av interaktiv design. 

Animationer är också en del av den audiovisuella världen, i själva verket skulle de inte vara någonting om eller inte, för i dem introduceras ett ljud och en rörlig bild. Av denna anledning, när vi talar om «animation», hänvisar vi till vad som i folkmun kallas för «tecknade filmer».

Som sammanfattat ovan uppstår animation från förmågan att ge rörelse åt något, i det här fallet tecknade serier. Men hur uppnås alla dessa rörelser? Tja, utan tvekan kommer de från vad vi kallar, sekvenser av ritningar eller fotografier att de genom att ordnas i följd, en efter en, lyckas generera en trovärdig rörelse framför våra ögon, som lämpar sig och går in i synvillans spel.

Tidigare designades de första animationerna på pappersark, i var och en av dem ritades den animerade karaktären med steg, och när slutet av arket nåddes passerades den snabbt en efter en för att uppnå effekten av rörelse i teckning.

Animationstyper

Det finns olika typer av animationer:

Tecknad eller traditionell animation

Denna stil består av att ge rörelse till huvudpersonen ruta för ruta. I början, när det inte fanns tillräckligt med audiovisuella medel, utfördes de genom teckning och målning av varje bildruta (inklusive bakgrunden, scenen eller bakgrunden till animationen), för att senare filmas på vad vi känner som ett filmband.

Stoppa rörelse

Stop Motion är en animationsteknik som inte har något med tecknade serier att göra. Dessutom är dess huvudmål att simulera rörelser av objekt som i verkligheten är helt statiska och det är uppdelat i två faser: animering av lera eller lerrörelse och animering av stela objekt.

Pixelering

Pixelering är en teknik som kommer från Stop Motion och består av att arbeta med föremål som varken är dockor eller modeller, utan vanliga föremål eller människor. Objekt fotograferas flera gånger och förskjuts något med varje bildruta.

Rotoskopi

Den består av direktritning av en annan ritning, till exempel spårning av en ritning på en annan ritning eller av en verklig person. Den anses vara en föregångare till mocap, det vill säga motion capture som används för att återskapa digitala karaktärer i filmvärlden.

Animation by Cutouts eller Cut Out Animation

Det är en teknik som består av att skära figurer, dessa figurer kan representeras på papper eller i fotografier. Karaktärernas kropp är byggd baserat på utskärningar och rörelse och animation uppstår från ett utbyte av nämnda utskärningar.

3d animation

3D-animering härstammar från ett redigeringsprogram som gör att simuleringar och animeringar kan utföras. Inom dessa två varianter kommer bra ljus, kamerarörelser och specialeffekter i kontakt.

För närvarande finns det även andra tekniker som: målningen på glas, animeringen av sand, skärmen av gujas och målningen på celluloid. 

Vad är CSS?

Nu när du vet lite mer om animationernas värld är det dags för oss att introducera dig till världen av CSS-förkortningar.

montrar CSS, se "cascading style sheets". Den består av ett språk som används inom designsektorn och i presentationen av webbsidor, ännu bättre, de är en serie verktyg och kommandon som ansvarar för att presentera en webbsida som vi ser den för första gången när den redan har skapats. Fungerar tillsammans med verktyget html (organiserat från grundinnehållet på sidorna).

Dess namn bestäms av antalet ark den innehåller och ett av dem ärver egenskaper eller egenskaper från andra. Det vill säga att du kan arbeta med en enkel bloggmall, men när du vill anpassa utseendet på en sida behöver du implementera CSS som tillsammans med ett bra CMS hjälper dig att öka räckvidden för ditt innehåll.

Vad är CSS till för?

Med CSS kan du organisera din sida, det vill säga du kan berätta för din webbsida hur du vill lokalisera all information så att tittaren är lätt att hantera och användbar på samma gång. Här anger du alla kommandon för vissa element som är en del av stilen eller designen på webbsidan, till exempel typsnitt, färger, storlekar etc. 

Normalt, så att du bättre förstår vad det här verktyget handlar om, är digital marknadsföringsspecialister de första som förstår detta eftersom det är de som hanterar dem.

Animera i CSS

Nåväl, nu när du vet lite om världen av animationer och CSS. Nu är det dags att starta handledningen.

CSS-animationer låter dig animera övergången mellan en CSS-stil och en annan. Dessa animationer består av två komponenter: a stil som beskriver CSS-animation och en uppsättning av ramar som indikerar dess initiala och slutliga tillstånd, såväl som möjliga mellanliggande punkter i det.

Var och en av dessa animationer har en rad fördelar:

• Dess användning är mycket lätt för enkla animationer, du kan göra det även utan att ha kunskap om Javascript.
• Animationen visas korrekt, även på datorer med låg effekt.
• Genom att kontrolleras av en webbläsare kan den optimera dess prestanda och effektivitet, vilket minskar frekvensen och exekverar flikarna på ett sådant sätt att de inte är synliga.

Animationsinställningar

För att starta en animation måste vi först och främst konfigurera den. För att göra detta går vi till fastigheten animering och till dess underegenskaper. Det här verktyget låter oss konfigurera både rytmen och varaktigheten för animeringen och inte ens dess sekvens.

Underegenskaperna är:

animation - fördröjning

Fördröjningstid mellan det ögonblick då elementet laddas och början av animeringssekvensen.

animation - regi

Indikerar om animeringen ska gå tillbaka till startbilden i slutet av sekvensen eller om den ska starta från början när den når slutet.

animation - varaktighet

Anger hur lång tid animeringen tar att slutföra sin cykel (längden)

animation - iteration - räkna

Antalet gånger det upprepas. Vi kan indikera oändlig för att upprepa animeringen på obestämd tid.

animation - namn

Den används för att ange namnet som beskriver var och en av bildrutor i animationen.

animation - play - state

Gör att du kan pausa och återuppta animeringssekvensen.

animation - timing-funktion

Det indikerar rytmen för animationen, det vill säga hur animationsramarna visas, för detta upprättas accelerationskurvor.

animation - fyll - läge

Anger vilka värden egenskaperna kommer att ha efter att animeringen slutar.

Ställ in sekvensen med ramar

När vi har konfigurerat tiden, nomenklaturen etc. Det är dags att erbjuda en look eller känsla till vår animation.

För att göra detta kommer vi att etablera två nya ramar och använda regeln @nyckelbilder. Med detta beskriver varje bildruta hur varje element hittas under animeringssekvensen.

För att ange tid och rytm, ramen använder procentuell och från och tillTack vare detta kan vi ange när början sker med 0% och slutet med 100%.

Ram och textanimering

För att lägga till fler ramar och animera dem med text måste du använda en större storlek på rubrikens teckensnitt så att rubriken ökar när den rör sig under en viss tid och sedan minskar till sin ursprungliga storlek efteråt. För detta kommer vi att upprätta följande kod:

75% teckensnitt - storlek: 300%; marginal - vänster: 25%; bredd: 150%;

Med den här koden föreslår vi för webbläsaren att i 75 % av sekvensen har rubriken en vänstermarginal på 25 % och en storlek på 200 % med en bredd på 150 %.

Upprepning av animering

För att göra en upprepning av en animation måste du använda följande egenskap animation - iteration - räkna och vi måste ange hur många gånger vi vill att det ska upprepas. Vi kan också använda oändlig så att det alltid upprepas.

Slutsats

Som du har sett kan du i CSS skapa animerade projekt och du kan gå in i det genom att följa stegen vi har gett dig. Om du fortsätter att fråga och informera dig själv kommer du att upptäcka att det finns många alternativ tillgängliga för oss.

Har du redan vågat?