de CodeDraken

Introducere în animații web

În această introducere la articolul despre animații web, vom acoperi animațiile CSS de bază folosind pseudo-clase, tranziții, și transformări.

Dacă nu sunteți sigur de ce ar trebui să utilizați animații CSS, atunci aruncați o privire aceste articole.

Unele exemple de cod de bază (și foarte urâte (deocamdată)) pentru acest articol vor fi pe CodePen:

Declanșat

Înainte de a intra în unele animații, să ne gândim cum vor fi activate. Majoritatea animațiilor noastre nu vor rula imediat când se încarcă o pagină. Mai frecvent vor fi declanșate printr-o schimbare de clasă (prin JavaScript) sau folosind Pseudo Classes.

ad-banner

Pseudo Foo

Iată câteva pseudo-clase care sunt utilizate cel mai frecvent pentru animații.

:planare
Pseudo-clasa hover este declanșată atunci când plasați cursorul peste țintă cu mouse-ul. În acest exemplu, setăm <; p> pentru a-și schimba culoarea în albastru atunci când este planat. Se va reveni la culoarea originală după ce mouse-ul se îndepărtează de ea.

<style> #hover-example:hover {  color: blue;  cursor: pointer; }</style>
<p id=”hover-example”>Hover example</p>

: focalizare

„Pseudo-clasa: focus CSS reprezintă un element (cum ar fi o intrare de formular) care a primit focalizare.” – MDN

(um … nu este ca și cum ai folosi un cuvânt pentru a se defini ??)

Focusul este utilizat în principal pentru intrări și butoane atunci când acestea sunt selectate / activate – adică când faceți clic pe o intrare sau filă în ea. În acest exemplu, făcând clic sau introducând tab-uri în intrare, acesta va schimba lățimea și culoarea de fundal. Dacă faceți clic din acesta, acesta va reveni la dimensiunea (și culoarea) inițială.

<style> input:focus {  background-color: #f4f4f4;  width: 50vw; }</style>
<input type=”text”>

:activ
Activul pare similar focalizării, dar de obicei este doar declanșat pentru o fracțiune de secundă. Primul caz de utilizare care ne vine în minte sunt ancorele (legăturile). În acest exemplu, facem orice cu clasa activate modificați în timp ce faceți clic (adică în timp ce este activ).

<style> .activate:active {  background-color: orange; }</style>
<p class=”activate”>Click me!</p><div class=”activate”>Activate me!</div><button class=”activate”>Hold me!</button>

Transformatoare

„Proprietatea CSS transform vă permite să rotiți, să scalați, să înclinați sau să traduceți un anumit element. „- MDN

Transform este locul în care vă duceți animațiile CSS la nivelul următor. Există aproximativ 21 de funcții pe care le puteți utiliza cu transformarea, dar nu le vom acoperi pe toate în acest articol.

Traduceți (x, y)

A traduce înseamnă că mutați ceva. În exemplul de mai jos, mutăm orice are translate clasă 10rem peste pe axa X și 5rem peste axa Y. (Dacă nu sunteți familiarizați cu rem, puteți utiliza și pixelii.)

Aceasta este funcția de scurtare care combină X și Y, dar puteți utiliza translateX sau translateY în schimb, dacă preferați.

<style> .translate {  transform: translate(10rem, 5rem) }</style>

Scară (x, y)

Similar cu translate, scala are și o scaleX, scaleY, și a scale funcția de stenografie. Folosiți scala pentru schimba dimensiunea a ceva. În exemplul de mai jos, elemente cu scale clasa este redusă la jumătate din dimensiunea lor.

<style> .scale {  transform: scale(0.5); }</style>

Transform-origine (x, y, z)

Originea transformării este o proprietate importantă atunci când este vorba de animații, în special de rotații. Este puțin ciudat și dificil de explicat doar cu cuvinte și vă recomand cu tărie să vă uitați la documentele MDN pentru acesta dacă nu sunteți deja familiarizați cu originile în schimbare (ca în Photoshop). Documentația cuvinte cel mai bine:

„Originea transformării este punctul în jurul căruia se aplică o transformare” – MDN

Imaginați-vă o roată:

Introducere in animatii web
roată de la Unsplash

Când roata se rotește, aceasta se rotește în jurul acelui punct central. Dar acum imaginați-vă că punctul central a fost mutat, să zicem, în colțul din stânga sus. Acum roata se rotește în jurul acelui nou punct oferind astfel o experiență foarte diferită. Acest punct central este similar cu originea. A se vedea CodePen pentru un exemplu interactiv.

Rotire (unghi)

Rotate face exact ceea ce spune că face. Puteți specifica orice unghi, negativ, pozitiv, orice număr și îl va roti atât de mult. Există câteva valori diferite pe care le puteți utiliza (deg, rad, grad) – vezi mai multe tipuri de valori pe MDN.

Facerea lucrurilor netede

Folosind tranziții putem netezi lucrurile și putem controla fluxul animațiilor noastre.

Tranzițiile sunt precum tweens sau a control de viteza pentru animația noastră. Poate dura 4 argumente și le voi acoperi în detaliu.

proprietate de tranziție

Proprietatea de tranziție este ce animați. Aceasta ar putea fi culoare, dimensiune, o transformare și așa mai departe. Ați putea spune și all pentru a trece totul, dar ar trebui să evitați să faceți acest lucru și să fiți mai specific.

Există un o listă imensă de proprietăți puteți anima pe MDN. Ar trebui să evitați să animați ceva care nu figurează pe listă.

transition-property: all;

durata tranziției

Aceasta este cât va dura animația să se termine. Folosiți secunde sau milisecunde.

transition-duration: 2s;

funcție-temporizare-tranziție

Aici devine mai complex. Funcția de sincronizare a tranziției este un curba de accelerare care descrie modul în care curge animația. Aruncăm o privire la aceste site-uri pentru a vedea cum arată această curbă și cum afectează animația.

Puteți avea ușurință, apoi ușurință, începeți încet, apoi terminați rapid sau un flux mai complex, cu unele părți lente și părți rapide. Există mai multe moduri de a avea fluxul de animație.

Din fericire, există câteva valori predefinite pe care le putem folosi:

easeease-inease-outease-in-outlinearstep-startstep-end

Va trebui să te joci puțin cu ei pentru a-l găsi pe cel pentru animația ta.

Uneori va trebui să ne folosim singuri cubic-bezier (sau folosiți o bibliotecă). Pentru aceasta, vă sugerez să găsiți un instrument online (consultați linkurile de mai sus) sau să utilizați instrumentele de dezvoltator ale browserului dvs. pentru a crea unul.

transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

întârziere de tranziție

Aceasta este poate cea mai simplă valoare. Întârzierea tranziției este timpul pe care îl va face așteptați înainte de a începe efectul. Folosiți secunde sau milisecunde.

transition-delay: 500ms;

Tranziție (proprietate, durată, calendar, întârziere)

Ați ghicit, acesta este stenografie pentru a combina toate funcțiile de mai sus.

Iată cum arată cu o singură tranziție:

transition: background 1s ease-in-out 0.5s;

Pentru multiple, trebuie să le adăugați la aceeași tranziție separată prin virgule.

transition: background 1s ease-in-out 0.5s,width 2s ease-in,height 1.5s;

In concluzie

Acesta este tot ce aveți nevoie pentru a începe să creați site-uri web interactive. Practicați ceea ce ați învățat și, odată ce ați însușit subiectele tratate aici, puteți trece la animații mai avansate.

În articolul următor (sau două) voi vorbi despre cadre cheie, transformări 3D, performanță, animații JavaScript și multe altele.

Mulțumesc pentru lectură! Dacă aveți întrebări, comentarii sau critici, vă rugăm să lăsați un comentariu mai jos și voi răspunde cât mai curând posibil.