CSS-animasjoner

Det er mange programmer der du kan redigere, lage montasjer eller til og med lage animasjoner, hver gang er det mange programvarer som legger til denne typen interaktive prosjekter. I dette innlegget skal vi ikke bare introdusere deg til animasjonens verden, men vi skal også introdusere deg for en ny venn.

Som du godt vet, er dataverdenen full av kommandoer og nyttige verktøy for utvikling av nettsider eller nettmedier, som for tiden eksisterer side om side. Bli hos oss og oppdag i denne nye opplæringen en annen måte å øke nivået ditt på med databehandling og interaktivitet.

Hva er animasjoner?

Vi vil at du skal gå inn i opplæringen fullt ut, men for dette er det nødvendig å gå inn i animasjonsverdenen eller det som gjelder grafisk design, verden av interaktiv design. 

Animasjoner er også en del av den audiovisuelle verdenen, faktisk ville de ikke vært noe hvis eller fordi en lyd og et bevegelig bilde ble introdusert i dem. Av denne grunn, når vi snakker om «animasjon», refererer vi til det som populært kalles «tegneserier».

Som oppsummert ovenfor, oppstår animasjon fra evnen til å gi bevegelse til noe, i dette tilfellet tegneserier. Men hvordan oppnås alle disse bevegelsene? Vel, uten tvil oppstår de fra det vi kaller, sekvenser av tegninger eller fotografier at de ved å bli beordret fortløpende, etter hverandre, klarer å generere en troverdig bevegelse foran øynene våre, som egner seg og går inn i visuell illusjon.

Tidligere ble de første animasjonene designet på papirark, i hver av dem ble den animerte karakteren tegnet ved å ta steg, og når slutten av arket var nådd, ble den passert en etter en raskt for å oppnå effekten av bevegelse i tegning.

Animasjonstyper

Det finnes forskjellige typer animasjoner:

Tegneserie eller tradisjonell animasjon

Denne stilen består i å gi bevegelse til hovedpersonen ramme for ramme. I begynnelsen, da det ikke var nok audiovisuelle midler, ble de utført gjennom tegning og maling av hver ramme (inkludert bakgrunnen, scenen eller bakgrunnen til animasjonen), for senere å bli filmet på det vi kjenner som et filmbånd.

Stopp bevegelse

Stop Motion er en animasjonsteknikk som ikke har noe med tegneserier å gjøre. Videre er hovedmålet å simulere bevegelsene til objekter som i virkeligheten er totalt statiske, og den er delt inn i to faser: animasjon av leire eller leirebevegelse og animasjon av stive objekter.

Pikselering

Pikselering er en teknikk som kommer fra Stop Motion og består i å jobbe med objekter som verken er dukker eller modeller, men vanlige objekter eller mennesker. Objekter fotograferes flere ganger og skifter litt med hver ramme.

Rotoskopi

Den består av direkte tegning av en annen tegning, for eksempel sporing av en tegning på en annen tegning eller av en virkelig person. Det regnes som en forløper for mocap, det vil si motion capture som brukes til å gjenskape digitale karakterer i kinoens verden.

Animasjon etter utklipp eller Cut out-animasjon

Det er en teknikk som består av å kutte figurer, disse figurene kan representeres på papir eller i fotografier. Karakterenes kropp er bygget basert på utskjæringer og bevegelse og animasjon oppstår ved en utskifting av utskjæringene.

Animasjon 3D

3D-animasjon kommer fra et redigeringsprogram, som lar simuleringer og animasjoner utføres. Innenfor disse to variantene kommer god belysning, kamerabevegelser og spesialeffekter i kontakt.

For tiden er det også andre teknikker som: maleriet på glass, animasjonen av sand, skjermen av gujas og maleriet på celluloid. 

Hva er CSS?

Nå som du vet litt mer om animasjonsverdenen, er det på tide for oss å introdusere deg til en verden av CSS-akronymer.

stands CSS, se "cascading style sheets". Den består av et språk som brukes i designsektoren og i presentasjonen av nettsider, enda bedre, de er en serie verktøy og kommandoer som har ansvaret for å presentere en nettside slik vi ser den for første gang når den allerede er opprettet. Fungerer sammen med verktøyet HTML (organisert fra basisinnholdet på sidene).

Navnet bestemmes av antall ark den inneholder, og ett av dem arver egenskaper eller egenskaper fra andre. Det vil si at du kan jobbe med en enkel bloggmal, men når du ønsker å tilpasse utseendet til et nettsted må du implementere CSS som sammen med et godt CMS vil hjelpe deg med å øke rekkevidden til innholdet ditt.

Hva er CSS for?

Med CSS kan du organisere siden din, det vil si at du kan fortelle nettsiden din hvordan du vil finne all informasjonen slik at seeren er enkel å håndtere og nyttig på samme tid. Her skriver du inn alle kommandoene til noen elementer som er en del av stilen eller designen til nettsiden, for eksempel fonter, farger, størrelser etc. 

Normalt, slik at du bedre forstår hva dette verktøyet handler om, er digital markedsføringsspesialister de første som forstår dette siden det er de som håndterer dem.

Animer i CSS

Vel, nå som du vet litt om verden av animasjoner og CSS. Nå er det på tide å starte opplæringen.

CSS-animasjoner lar deg animere overgangen mellom en CSS-stil og en annen. Disse animasjonene består av to komponenter: a stil som beskriver CSS-animasjon og et sett med rammer som indikerer dens opprinnelige og endelige tilstand, samt mulige mellompunkter i den.

Hver av disse animasjonene har en rekke fordeler:

• Bruken er veldig enkel for enkle animasjoner, du kan gjøre det selv uten å ha kunnskap om Javascript.
• Animasjonen vises riktig, selv på datamaskiner med lite strøm.
• Ved å være kontrollert av en nettleser, tillater den å optimere ytelsen og effektiviteten, og dermed redusere frekvensen og utføre fanene på en slik måte at de ikke er synlige.

Animasjonsinnstillinger

For å starte en animasjon må vi først og fremst konfigurere den. For å gjøre dette går vi til eiendommen animasjon og dens underegenskaper. Dette verktøyet lar oss konfigurere både rytmen og varigheten av animasjonen og ikke engang sekvensen.

Underegenskapene er:

animasjon - forsinkelse

Forsinkelsestid mellom øyeblikket elementet lastes inn og begynnelsen av animasjonssekvensen.

animasjon - retning

Angir om animasjonen skal spole tilbake til startbildet på slutten av sekvensen eller om den skal starte fra begynnelsen på slutten.

animasjon - varighet

Indikerer hvor lang tid animasjonen tar å fullføre syklusen (varigheten)

animasjon - iterasjon - telle

Antall ganger det gjentas. Vi kan indikere uendelig for å gjenta animasjonen på ubestemt tid.

animasjon - navn

Den brukes til å spesifisere navnet som beskriver hver av rammene i animasjonen.

animasjon - spill - stat

Lar deg pause og gjenoppta animasjonssekvensen.

animasjon - timing-funksjon

Det indikerer rytmen til animasjonen, det vil si hvordan animasjonsrammene vises, for dette etableres akselerasjonskurver.

animasjon - fyll - modus

Spesifiserer hvilke verdier egenskapene vil ha etter at animasjonen avsluttes.

Sett opp sekvensen med rammer

Når vi har konfigurert tiden, nomenklaturen osv. Det er på tide å gi et utseende eller en følelse til animasjonen vår.

For å gjøre dette vil vi etablere to nye rammer og bruke regelen @keyframes. Med dette beskriver hver ramme hvordan hvert element blir funnet under animasjonssekvensen.

For å indikere tid og rytme, bruker rammen prosent og fra og tilTakket være dette kan vi indikere når begynnelsen finner sted med 0 % og slutten med 100 %.

Ramme- og tekstanimasjon

For å legge til flere rammer og animere dem med tekst, må du bruke en større størrelse på overskriftsskriften slik at overskriften øker etter hvert som den beveger seg i en viss tid, og deretter reduseres til den opprinnelige størrelsen etterpå. For dette skal vi etablere følgende kode:

75% skrift - størrelse: 300%; marg - venstre: 25%; bredde: 150 %;

Med denne koden foreslår vi for nettleseren at i 75 % av sekvensen har overskriften en venstre marg på 25 % og en størrelse på 200 % med en bredde på 150 %.

Animasjon gjenta

For å gjenta en animasjon må du bruke følgende egenskap animasjon - iterasjon - telle og vi må angi hvor mange ganger vi vil at det skal gjentas. Vi kan også bruke uendelig slik at det alltid gjentas.

Konklusjon

Som du har sett, i CSS kan du lage animerte prosjekter, og du kan gå inn i det ved å følge trinnene vi har gitt deg. Hvis du fortsetter å spørre og informere deg selv, vil du oppdage at det er mange alternativer tilgjengelig for oss.

Har du allerede våget?