CSS animációk

Css bemutató

Forrás: Online program

Számos program létezik, ahol szerkeszthetsz, montázsokat készíthetsz, vagy akár alkothatsz is animációk, minden alkalommal, amikor sok szoftver ad hozzá ilyen típusú interaktív projekteket. Ebben a bejegyzésben nem csak az animációk világába vezetünk be, hanem egy új barátot is.

Mint Ön is tudja, a számítástechnika világa tele van parancsokkal és hasznos eszközökkel a weboldalak vagy az online média fejlesztéséhez, amelyek jelenleg együtt léteznek. Maradjon velünk, és fedezzen fel ebben az új oktatóanyagban egy másik módszert, amellyel a számítástechnika és az interaktivitás növelheti a tudását.

Mik azok az animációk?

Az animációk világa

Forrás: Minden játékos

Szeretnénk, ha teljes mértékben belépne az oktatóanyagba, de ehhez be kell lépni az animációk világába, vagy ami a grafikai tervezésről szól, az interaktív tervezés. 

Az animációk is részei az audiovizuális világnak, tulajdonképpen semmiek lennének, ha hangot és mozgóképet vezetnek be, vagy mert bevezetnek. Emiatt, amikor „animációról” beszélünk, az általunk ismert „rajzfilmekre” hivatkozunk.

Ahogy fentebb összefoglaltuk, az animáció abból a képességből fakad, hogy mozgást adunk valaminek, jelen esetben a rajzfilmeknek. De hogyan valósult meg mindezek a mozgások? Nos, kétségtelenül abból fakadnak, amit úgy hívunk, rajzok vagy fényképek sorozatai hogy egymás után, egymás után rendelve hiteles mozgást generálnak a szemünk láttára, amely megadja magát és belép a vizuális illúzió játékába.

Korábban az első animációkat papírlapokra tervezték, mindegyikben lépésenként rajzolták meg az animált karaktert, majd a lap végére érve gyorsan egyenként haladták át, hogy elérjék a mozgás hatását a rajz.

Animáció típusok

Különféle animációs típusok léteznek:

Rajzfilm vagy hagyományos animáció

Ez a stílus abból áll, hogy kockánként mozgást ad a főszereplőnek. Kezdetben, amikor nem volt elegendő audiovizuális eszköz, minden egyes képkocka (beleértve az animáció hátterét, színpadát vagy hátterét) megrajzolásával és megfestésével végezték, hogy később az általunk ismert filmszalagra forgatják.

Stop motion

A Stop Motion egy animációs technika, amelynek semmi köze a rajzfilmekhez. Sőt, fő célja a valóságban teljesen statikus tárgyak mozgásának szimulálása, és két fázisra oszlik: agyag animáció vagy agyagmozgás és merev tárgyak animációja.

Pixeláció

A pixelezés egy olyan technika, amely a Stop Motionból származik, és olyan tárgyakkal való munkavégzésből áll, amelyek nem babák vagy modellek, hanem hétköznapi tárgyak vagy emberek. A tárgyakat többször lefényképezik, és minden egyes képkockával kissé eltolódnak.

Rotoszkópia

Egy másik rajz közvetlen rajzából áll, például egy rajz nyomon követéséből egy másik rajzon vagy egy valós személyé. A mocap, azaz a motion capture előfutárának tartják, amelyet digitális karakterek újraalkotására használnak a mozi világában.

Animáció kivágásokkal vagy kivágott animációkkal

Ez egy olyan technika, amely figurák kivágásából áll, ezek a figurák papíron vagy fényképeken ábrázolhatók. A karakterek teste kivágásokra épül, a mozgás és az animáció pedig az említett kivágások cseréjéből fakad.

Animáció 3D

A 3D animáció egy szerkesztő programból származik, amely lehetővé teszi szimulációk és animációk végrehajtását. Ezen a két változaton belül a jó megvilágítás, a kameramozgások és a speciális effektusok érintkeznek.

Jelenleg más technikák is léteznek, mint pl. az üvegre festés, a homok animációja, a guják képernyője és a celluloid festmény. 

Mi az a CSS?

Egy program Css interfésze

Forrás: Rosario Session Studio Web Design

Most, hogy egy kicsit többet tudsz az animációk világáról, itt az ideje, hogy bemutassuk a CSS betűszavak világába.

állványok CSS, olvassa el a „lépcsőzetes stíluslapokat”. Egy olyan nyelv alkotja, amelyet a tervezési szektorban és a weboldalak megjelenítésében használnak, tehát vagy jobban érthető, ezek olyan eszközök és parancsok sorozata, amelyek felelősek azért, hogy egy weboldalt úgy jelenítsenek meg, ahogyan azt először látjuk. . ha már létrejött. Az eszközzel együtt működik HTML (az oldalak alaptartalmából rendezve).

Nevét a benne lévő levelek száma határozza meg, és egyikük tulajdonságait vagy jellemzőit másoktól örökli. Ez azt jelenti, hogy dolgozhat egy egyszerű blogsablonnal, de ha egy webhely megjelenését szeretné személyre szabni, akkor CSS-t kell megvalósítania, amely egy jó CMS-sel együtt segít növelni a tartalom elérését.

Mire való a CSS?

A CSS segítségével rendszerezheti az oldalt, azaz megmondhatja a weboldalának, hogyan szeretné elhelyezni az összes információt, hogy a néző könnyen kezelhető és hasznos legyen. Ide írja be néhány olyan elem összes parancsát, amely a weboldal stílusának vagy kialakításának részét képezi, például a betűtípusok, színek, méretek stb. 

Általában annak érdekében, hogy jobban megértse, miről szól ez az eszköz, a digitális marketing szakemberei értenek először ehhez, mivel ők kezelik őket.

Animálás CSS-ben

Nos, most, hogy tud egy kicsit az animációk és a CSS világáról. Ideje elkezdeni az oktatóprogramot.

A CSS-animációk lehetővé teszik az egyik CSS-stílus és a másik közötti átmenet animálását. Ezek az animációk két összetevőből állnak: a stílus amely leírja a CSS-animációt és a keretek amelyek jelzik annak kezdeti és végső állapotát, valamint lehetséges közbenső pontjait.

Mindegyik animációnak számos előnye van:

  • Használata egyszerű animációkhoz nagyon egyszerű, Javascript ismerete nélkül is megteheti.
  • Az animáció még alacsony fogyasztású számítógépeken is megfelelően jelenik meg.
  • Böngésző által vezérelve lehetővé teszi a teljesítmény és a hatékonyság optimalizálását, ezáltal csökkentve a gyakoriságot és úgy, hogy a lapokat úgy hajtja végre, hogy azok ne legyenek láthatóak.

Animációs beállítások

Az animáció elindításához először is konfigurálnunk kell. Ehhez az ingatlanba megyünk animáció és annak altulajdonságaira. Ezzel az eszközzel beállíthatjuk az animáció ritmusát és időtartamát, de még a sorrendjét sem.

Az altulajdonságok a következők:

animáció - késleltetés

Késleltetési idő az elem betöltése és az animációs sorozat kezdete között.

animáció - rendezés

Azt jelzi, hogy az animációnak vissza kell-e mennie a sorozat végén a kezdő képkockához, vagy elölről kell-e kezdenie, amikor eléri a végét.

animáció - időtartam

Azt jelzi, hogy az animációnak mennyi időbe telik a ciklusa (az időtartam)

animáció - iteráció - szám

Az ismétlődések száma. jelezhetjük végtelen hogy a végtelenségig ismételje az animációt.

animáció - név

Az animáció egyes képkockáit leíró név megadására szolgál.

animáció - játék - állapot

Lehetővé teszi az animációs sorozat szüneteltetését és folytatását.

animáció - időzítés - funkció

Jelzi az animáció ritmusát, vagyis azt, hogy az animációs képkockák hogyan jelennek meg, ehhez gyorsulási görbék jönnek létre.

animáció - kitöltés - mód

Meghatározza, hogy a tulajdonságoknak milyen értékei lesznek az animáció befejezése után.

Állítsa be a sorrendet keretekkel

Miután beállítottuk az időt, a nómenklatúrát stb. Itt az ideje, hogy egy külsőt vagy hangulatot adjunk animációnknak.

Ehhez két új keretet hozunk létre, és használjuk a szabályt @ kulcsképek. Ezzel minden képkocka leírja, hogy az egyes elemek hogyan találhatók meg az animációs sorozat során.

Jelezni a idő és ritmus, a keret használja százalék és felől és odaEnnek köszönhetően tudjuk jelezni, hogy az eleje mikor történik 0%-kal, a vége pedig 100%-kal.

Keret- és szöveganimáció

További keretek hozzáadásához és szöveggel való animálásához nagyobb méretű fejléc-betűtípust kell alkalmaznia, hogy a fejléc mozgás közben növekedjen egy meghatározott ideig, majd csökkenjen az eredeti méretére. Ehhez a következő kódot fogjuk létrehozni:

75% betűtípus - méret: 300%; margó - bal: 25%; szélesség: 150%;

Ezzel a kóddal azt javasoljuk a böngészőnek, hogy a sorozat 75%-ában a fejléc bal margója 25%, a mérete pedig 200%, szélessége pedig 150%.

Animáció ismétlése

Az animáció megismétléséhez a következő tulajdonságot kell használnia animáció - iteráció - szám és jeleznünk kell, hogy hányszor szeretnénk megismétlődni. Használhatjuk is végtelen hogy mindig megismétlődjön.

Következtetés

Amint láthatta, a CSS-ben animált projekteket hozhat létre, és az általunk megadott lépések végrehajtásával léphet be. Ha továbbra is érdeklődik és tájékozódik, rá fog jönni, hogy számos lehetőség áll rendelkezésünkre.

Meg merted már?


A cikk tartalma betartja a szerkesztői etika. A hiba bejelentéséhez kattintson a gombra itt.

Legyen Ön az első hozzászóló

Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra.

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.