Animații CSS

Există numeroase programe pentru editare, creare de montaje sau chiar animații , iar tot mai multe programe software sunt adăugate acestui tip de proiect interactiv. În această postare, nu numai că vă vom prezenta lumea animațiilor, dar vă vom prezenta și un nou prieten.

După cum bine știți, lumea computerelor este plină de comenzi și instrumente utile pentru dezvoltarea de pagini web sau medii online, care coexistă în prezent. Rămâneți cu noi și descoperiți în acest nou tutorial o altă modalitate de a vă crește nivelul de calcul și interactivitate.

Ce sunt animațiile?

Vrem să te cufunzi complet în tutorial, dar pentru a face acest lucru, este necesar să te introduci în lumea animațiilor sau în ceea ce în design grafic este denumită lumea designului interactiv.

Animațiile fac și ele parte din lumea audiovizualului, de fapt nu ar fi nimic dacă sau pentru că în ele s-ar introduce un audio și o imagine în mișcare. Din acest motiv, când vorbim de „animație”, ne referim la ceea ce este cunoscut în mod popular sub denumirea de „desene animate”.

Așa cum s-a rezumat mai sus, animația apare din capacitatea de a da mișcare unui lucru, în acest caz, desenelor animate. Dar cum se realizează toate aceste mișcări? Fără îndoială, ele provin din ceea ce numim secvențe de desene sau fotografii care, atunci când sunt aranjate consecutiv, una după alta, reușesc să genereze o mișcare credibilă în fața ochilor noștri, care acceptă și participă cu ușurință la jocul iluziei vizuale.

Anterior, primele animații erau concepute pe foi de hârtie, în fiecare dintre ele personajul animat era desenat făcând pași, iar odată ajuns la capătul foii, acesta era trecut rapid unul câte unul pentru a obține efectul de mișcare în desen.

Tipuri de animație

Există diferite tipuri de animație:

Desen animat sau animație tradițională

Acest stil constă în a da mișcare protagonistului cadru cu cadru. La început, când nu existau suficiente mijloace audiovizuale, acestea au fost realizate prin desenarea și pictura fiecărui cadru (inclusiv fundalul, scena sau fundalul animației), pentru a fi ulterior filmate pe ceea ce cunoaștem ca bandă de film.

Opri mișcare

Stop Motion este o tehnică de animație care nu are nimic de-a face cu desenele animate. Mai mult, obiectivul său principal este acela de a simula mișcările unor obiecte care în realitate sunt total statice și este împărțit în două faze: animație de lut sau mișcare de lut și animație de obiecte rigide.

Pixelare

Pixelarea este o tehnică care provine din Stop Motion și constă în lucrul cu obiecte care nu sunt nici păpuși, nici modele, ci obiecte comune sau oameni. Obiectele sunt fotografiate de mai multe ori și se deplasează ușor cu fiecare cadru.

Rotoscopie

Constă în desenarea directă a unui alt desen, cum ar fi trasarea unui desen pe alt desen sau a unei persoane reale. Este considerat un precursor al mocapului, adică al capturii de mișcare care este folosit pentru a recrea personaje digitale în lumea cinematografiei.

Animație prin decupaje sau animație cu decupaje

Este o tehnică care constă în tăierea figurilor, aceste figuri putând fi reprezentate pe hârtie sau în fotografii. Corpul personajelor este construit pe baza decupajelor, iar mișcarea și animația rezultă dintr-o înlocuire a decupajelor menționate.

animație 3d

Animația 3D provine dintr-un program editor, care permite efectuarea de simulări și animații. In cadrul acestor doua variante intra in contact iluminarea buna, miscarile camerei si efectele speciale.

În prezent există și alte tehnici precum: pictura pe sticlă, animația cu nisip, ecranul cu ac și pictura pe celuloid.

Ce este CSS?

Acum că știți puțin mai multe despre lumea animațiilor, este timpul să vă prezentăm lumea acronimelor CSS.

Acronimul CSS înseamnă „Cascading Style Sheets” (Foaie de stil în cascadă). Este un limbaj folosit în designul și prezentarea web. Simplu spus, este un set de instrumente și comenzi care asigură că o pagină web arată exact așa cum o vedem pentru prima dată după ce a fost creată. Funcționează împreună cu HTML ( care organizează conținutul de bază al paginilor).

Numele său este determinat de numărul de foi pe care le conține și una dintre ele moștenește proprietăți sau caracteristici de la altele. Adică poți lucra cu un șablon de blog simplu, dar atunci când vrei să personalizezi aspectul unui site va trebui să implementezi CSS care împreună cu un CMS bun te va ajuta să-ți sporești acoperirea conținutului.

Pentru ce este CSS?

Cu CSS, vă puteți organiza pagina; adică, puteți spune site-ului dvs. web cum să aranjeze toate informațiile astfel încât să fie ușor de utilizat și utile pentru vizitator. Aceasta include toate comenzile pentru elementele care fac parte din stilul sau designul site-ului web, cum ar fi fonturile, culorile, dimensiunile și așa mai departe.

În mod normal, pentru a înțelege mai bine despre ce este acest instrument, specialiștii în marketing digital sunt primii care înțeleg acest lucru, deoarece ei sunt cei care se ocupă de ele.

Animați în CSS

Ei bine, acum că știi puțin despre lumea animațiilor și CSS. Este timpul să începem tutorialul.

Animațiile CSS vă permit să animați tranziția între un stil CSS și altul. Aceste animații constau din două componente: un stil care descrie animația CSS și un set de cadre care indică stările sale inițiale și finale, precum și orice puncte intermediare.

Fiecare dintre aceste animații are o serie de avantaje:

• Folosirea sa este foarte usoara pentru animatii simple, o poti face chiar si fara sa ai cunostinte de Javascript.
• Animația se afișează corect, chiar și pe computere cu consum redus.
• Fiind controlat de un browser, permite optimizarea performanței și eficienței acestuia, reducând astfel frecvența și executând file-urile în așa fel încât să nu fie vizibile.

Setări de animație

Pentru a începe o animație, trebuie mai întâi să o configurăm. Pentru a face acest lucru, vom accesa proprietatea animației și subproprietățile acesteia. Acest instrument ne va permite să configurăm atât ritmul, cât și durata animației, și chiar și secvența acesteia.

Subproprietățile sunt:

animație – întârziere

Timp de întârziere între momentul în care elementul este încărcat și începutul secvenței de animație.

animație – regie

Indică dacă animația ar trebui să revină la cadrul de început la sfârșitul secvenței sau dacă ar trebui să înceapă de la început când ajunge la sfârșit.

animatie - durata

Indică timpul necesar animației pentru a-și finaliza ciclul (durata)

animație - iterație - numărare

Numărul de repetări. Putem specifica infinit pentru a repeta animația la nesfârșit.

animație – nume

Este folosit pentru a specifica numele care descrie fiecare dintre cadrele animației.

animație - joacă - stare

Vă permite să întrerupeți și să reluați secvența de animație.

animatie - sincronizare - functie

Indică ritmul animației, adică modul în care sunt afișate cadrele de animație, pentru aceasta se stabilesc curbele de accelerație.

animație - umplere - mod

Specifică ce valori vor avea proprietățile după terminarea animației.

Configurați secvența cu cadre

Odată ce am configurat ora, nomenclatura etc. Este timpul să oferim un aspect sau o senzație animației noastre.

Pentru a face acest lucru, vom configura două cadre noi și vom folosi regula @keyframes . În acest fel, fiecare cadru descrie poziția fiecărui element în timpul secvenței de animație.

Pentru a indica timpul și ritmul , cadrul folosește procentul și cu de la și până la , datorită acestui fapt putem indica când are loc începutul cu 0% și sfârșitul cu 100%.

Animație cadru și text

Pentru a adăuga mai multe cadre și a le anima cu text, trebuie să aplicați o dimensiune mai mare a fontului antetului, astfel încât antetul să crească pe măsură ce se mișcă pentru o anumită perioadă de timp, apoi să scadă la dimensiunea inițială. Pentru aceasta vom stabili următorul cod:

75% font - dimensiune: 300%; margn - stânga: 25%; latime: 150%;

Cu acest cod, sugerăm browserului că în 75% din secvență, antetul are o marjă din stânga de 25% și o dimensiune de 200% cu o lățime de 150%.

Se repetă animația

Pentru a face o animație să se repete, trebuie să utilizați proprietatea `animation – iteration – count` și să specificați de câte ori doriți să se repete. De asemenea, puteți utiliza `infinite` pentru a o face să se repete la nesfârșit.

Concluzie

După cum ați văzut, în CSS puteți crea proiecte animate și puteți intra în el urmând pașii pe care v-am dat-o. Dacă continuați să vă întrebați și să vă informați, veți descoperi că există multe opțiuni disponibile pentru noi.

Ai îndrăznit deja?