CSS-animaatioita

On monia ohjelmia, joissa voit muokata, luoda montaaseja tai jopa luoda animaatiot, joka kerta, kun monet ohjelmistot lisäävät tämäntyyppisiä interaktiivisia projekteja. Tässä postauksessa emme vain esittele sinua animaatioiden maailmaan, vaan aiomme myös esitellä sinulle uuden ystävän.

Kuten hyvin tiedät, tietokonemaailma on täynnä komentoja ja hyödyllisiä työkaluja web-sivujen tai verkkomedian kehittämiseen, jotka tällä hetkellä toimivat rinnakkain. Pysy kanssamme ja löydä tässä uudessa opetusohjelmassa toinen tapa parantaa tasoasi tietojenkäsittelyn ja vuorovaikutteisuuden avulla.

Mitä animaatiot ovat?

Haluamme sinun pääsevän kokonaan opetusohjelmaan, mutta tätä varten sinun on astuttava animaatioiden maailmaan tai graafisen suunnittelun maailmaan. interaktiivinen suunnittelu. 

Animaatiot ovat myös osa audiovisuaalista maailmaa, itse asiassa ne olisivat mitään, jos tai koska niissä esitettäisiin ääni ja liikkuva kuva. Tästä syystä, kun puhumme "animaatiosta", viittaamme siihen, mitä yleisesti kutsutaan "sarjakuviksi".

Kuten edellä on tiivistetty, animaatio syntyy kyvystä antaa liikettä jollekin, tässä tapauksessa sarjakuville. Mutta miten kaikki nämä liikkeet saavutetaan? No, epäilemättä ne syntyvät siitä, mitä me kutsumme piirustusten tai valokuvien sarjat että peräkkäin, yksi toisensa jälkeen, ne onnistuvat synnyttämään silmiemme edessä uskottavan liikkeen, joka soveltuu ja astuu visuaalisen illuusion peliin.

Aiemmin ensimmäiset animaatiot suunniteltiin paperiarkeille, joissa jokaisessa animoitu hahmo piirrettiin portaittain, ja kun arkin loppu oli saavutettu, se kuljettiin nopeasti yksitellen läpi liikevaikutuksen saavuttamiseksi. piirustus.

Animaatiotyypit

Animaatioita on erilaisia:

Sarjakuva tai perinteinen animaatio

Tämä tyyli koostuu liikkeen antamisesta päähenkilölle kuva kuvalta. Alussa, kun audiovisuaalisia välineitä ei riittänyt, ne toteutettiin piirtämällä ja maalaamalla jokainen kehys (mukaan lukien animaation tausta, näyttämö tai tausta), jotta ne myöhemmin kuvattiin niin sanotulle elokuvanauhalle.

Pysäytä liike

Stop Motion on animaatiotekniikka, jolla ei ole mitään tekemistä sarjakuvien kanssa. Lisäksi sen päätavoitteena on simuloida esineiden liikkeitä, jotka todellisuudessa ovat täysin staattisia, ja se on jaettu kahteen vaiheeseen: saven animaatio tai claymotion ja jäykkien esineiden animaatio.

Pikselointi

Pikselointi on Stop Motionista peräisin oleva tekniikka, joka koostuu työskentelystä esineiden kanssa, jotka eivät ole nukkeja tai malleja, vaan tavallisia esineitä tai ihmisiä. Kohteita kuvataan useita kertoja ja ne siirtyvät hieman jokaisen ruudun kanssa.

Rotoskooppi

Se koostuu toisen piirustuksen suorasta piirtämisestä, kuten piirustuksen jäljittämisestä toiseen piirustukseen tai oikean henkilön piirtämisestä. Sitä pidetään mocapin edeltäjänä eli liikkeenkaappauksena, jota käytetään digitaalisten hahmojen luomiseen elokuvamaailmassa.

Animaatio Cutouts tai Cut Out Animation

Se on tekniikka, joka koostuu hahmojen leikkaamisesta, nämä hahmot voidaan esittää paperilla tai valokuvissa. Hahmojen runko on rakennettu leikkausten pohjalta ja liike ja animaatio syntyvät mainittujen leikkausten korvaamisesta.

Animaatio 3D

3D-animaatio on peräisin editoriohjelmasta, joka mahdollistaa simulaatioiden ja animaatioiden toteuttamisen. Näissä kahdessa versiossa hyvä valaistus, kameran liikkeet ja erikoistehosteet kohtaavat.

Tällä hetkellä on myös muita tekniikoita, kuten: lasimaalaus, hiekan animaatio, guja-näytöt ja selluloidimaalaus. 

Mikä on CSS?

Nyt kun tiedät hieman enemmän animaatioiden maailmasta, meidän on aika esitellä sinulle CSS-lyhenteiden maailma.

seisoo CSS, katso "peräkkäiset tyylisivut". Se koostuu kielestä, jota käytetään suunnittelualalla ja web-sivujen esittämisessä, mikä vielä parempaa, ne ovat sarja työkaluja ja komentoja, jotka vastaavat verkkosivun esittämisestä sellaisena kuin näemme sen ensimmäistä kertaa. kun se on jo luotu. Toimii yhdessä työkalun kanssa HTML (järjestetty sivujen perussisällöstä).

Sen nimi määräytyy sen sisältämien arkkien lukumäärän mukaan, ja yksi niistä perii ominaisuuksia tai ominaisuuksia muilta. Toisin sanoen voit työskennellä yksinkertaisen blogimallin kanssa, mutta kun haluat muokata sivuston ulkoasua, sinun on otettava käyttöön CSS, joka yhdessä hyvän sisällönhallintajärjestelmän kanssa auttaa sinua parantamaan sisältösi kattavuutta.

Mihin CSS on tarkoitettu?

CSS:n avulla voit järjestää sivusi, eli voit kertoa verkkosivullesi, miten haluat paikantaa kaikki tiedot, jotta katsoja on helppo käsitellä ja samalla hyödyllinen. Kirjoita tähän kaikki komennot joidenkin elementtien, jotka ovat osa web-sivun tyyliä tai ulkoasua, esim fontit, värit, koot jne. 

Tavallisesti digitaalisen markkinoinnin asiantuntijat ymmärtävät tämän ensimmäisenä, jotta ymmärrät paremmin, mistä tässä työkalussa on kyse, koska he ovat ne, jotka käsittelevät niitä.

Animoi CSS:ssä

No, nyt kun tiedät vähän animaatioiden ja CSS:n maailmasta. Nyt on aika aloittaa opetusohjelma.

CSS-animaatioiden avulla voit animoida siirtymän CSS-tyylistä toiseen. Nämä animaatiot koostuvat kahdesta osasta: a tyyli joka kuvaa CSS-animaatiota ja joukkoa kehykset jotka osoittavat sen alku- ja lopputilan sekä mahdolliset välipisteet siinä.

Jokaisella näistä animaatioista on useita etuja:

• Sen käyttö on erittäin helppoa yksinkertaisissa animaatioissa, voit tehdä sen jopa ilman Javascriptin tuntemusta.
• Animaatio näkyy oikein, jopa vähän virtaa kuluttavilla tietokoneilla.
• Selaimen ohjaamana se mahdollistaa sen suorituskyvyn ja tehokkuuden optimoinnin, mikä vähentää taajuutta ja suorittaa välilehdet siten, että ne eivät näy.

Animaatioasetukset

Animaation aloittamiseksi meidän on ensin määritettävä se. Tätä varten menemme kiinteistöön animaatio ja sen aliominaisuudet. Tämän työkalun avulla voimme määrittää animaation rytmin ja keston, ei edes sen järjestystä.

Aliominaisuudet ovat:

animaatio - viive

Viive elementin lataamisen ja animaatiojakson alun välillä.

animaatio - suunta

Ilmaisee, kelataanko animaatio takaisin aloituskehykseen sarjan lopussa vai aloitetaanko sen lopusta alusta.

animaatio - kesto

Ilmaisee ajan, jonka animaatio vie syklinsä loppuun (kesto)

animaatio - iterointi - määrä

Kuinka monta kertaa se toistetaan. Voimme ilmoittaa ääretön toistaa animaatiota loputtomiin.

animaatio - nimi

Sitä käytetään määrittämään nimi, joka kuvaa animaation jokaista kehystä.

animaatio - näytelmä - tila

Voit keskeyttää animaatiosarjan ja jatkaa sitä.

animaatio - ajoitus -toiminto

Se ilmaisee animaation rytmin eli kuinka animaatiokehykset näytetään, tätä varten muodostetaan kiihtyvyyskäyrät.

animaatio - täyttö -tila

Määrittää, mitä arvoja ominaisuuksilla on animaation päätyttyä.

Aseta järjestys kehyksillä

Kun olemme määrittäneet ajan, nimikkeistön jne. On aika tarjota ulkoasua animaatioomme.

Tätä varten luomme kaksi uutta kehystä ja käytämme sääntöä @ avainkehykset. Tämän avulla jokainen kehys kuvaa, kuinka kukin elementti löydetään animaatiojakson aikana.

Osoittaakseen aika ja rytmi, kehys käyttää osuus ja alkaen ja sinneTämän ansiosta voimme ilmoittaa, milloin alku tapahtuu 0 %:lla ja loppu 100 %:lla.

Kehys- ja tekstianimaatio

Jos haluat lisätä kehyksiä ja animoida niitä tekstillä, sinun on käytettävä suurempaa otsikkofontin kokoa, jotta otsikko kasvaa liikkuessaan tietyn ajan ja pienenee sen jälkeen alkuperäiseen kokoonsa. Tätä varten luomme seuraavan koodin:

75 % fontti - koko: 300 %; marginaali - vasen: 25%; leveys: 150 %;

Tällä koodilla suosittelemme selaimelle, että 75 %:ssa sarjasta otsikon vasen marginaali on 25 % ja koko 200 % ja leveys 150 %.

Animaatio toisto

Jotta animaatio toistuisi, sinun on käytettävä seuraavaa ominaisuutta animaatio - iterointi - määrä ja meidän on ilmoitettava, kuinka monta kertaa haluamme sen toistuvan. Voimme myös käyttää ääretön niin että se toistuu aina.

Johtopäätös

Kuten olet nähnyt, CSS:ssä voit luoda animoituja projekteja ja voit kirjoittaa ne noudattamalla sinulle antamiamme ohjeita. Jos jatkat tiedusteluja ja tiedottamista, huomaat, että meillä on monia vaihtoehtoja.

Oletko jo uskaltanut?