Ce este proprietatea direcției de animație CSS: tot ce trebuie să știți

Ce crezi că CSS este folosit doar pentru a crea animații? Într-adevăr, este, dar împreună cu acesta, puteți utiliza și CSS pentru a controla viteza, durata, direcția, ora de pornire etc.

Indiferent dacă doriți ca animația dvs. să se miște într-o direcție în sus sau în jos, proprietatea CSS animație-direcție în dezvoltarea web vă va permite să vă atingeți obiectivele.

Ești nou în asta? Nu trebuie să vă supărați! În acest blog, veți afla totul despre proprietățile animației CSS.

Acum, fără alte prelungiri, să înțelegem despre ce este animația CSS, împreună cu utilizarea acesteia.

Ce este proprietatea CSS animație-direcție?

Proprietatea de direcție a animației CSS se referă la direcția animației. Odată ce setați această proprietate, puteți seta cu ușurință ciclul de animație înapoi, înainte sau într-o direcție alternativă.

Acum, să aruncăm o privire asupra diferitelor direcții de animație:

• regia-animatie: normal;
• animație-direcție: invers;
• animație-direcție: alternativ-invers;
• animație-regie: alternativă;

Pentru a vă ajuta în continuare, am împărtășit sintaxa proprietății animație-direcție. Sperăm că această sintaxă vă va ajuta să creați animații ca un profesionist.

/* Proprietatea animație unică a animației CSS */

• regia-animatie: normal;
• animație-direcție: invers;
• animație-regie: alternativă;
• animație-direcție: alternativ-invers;

/* Proprietatea animații multiple ale animației CSS */

• animație-direcție: normal, invers;
• animație-direcție: alternativă, inversă, normală;

/* Valorile globale ale proprietății de animație CSS */

• animație-direcție: moștenire;
• animatie-regia: initiala;
• animație-direcție: retur;
• animație-direcție: unset;

Acum că cunoașteți diferite proprietăți de animație CSS, este timpul să înțelegeți valorile proprietăților de animație CSS.

Proprietatea animație CSS Valori

Normal

Dacă utilizați această proprietate, animația se va reda înainte. Înseamnă că pentru fiecare ciclu de animație, animația se va reseta la starea de început și va începe din nou.

Valoarea - „Normal” este practic valoarea implicită a proprietății animație-direcție în CSS. Deci, dacă nu veți seta această proprietate, atunci în mod implicit, se va reda înainte.

Verso

Animația inversă se referă la animațiile care se fac în direcția inversă în fiecare ciclu. În acest stil, pașii de animație și funcțiile de sincronizare sunt efectuate înapoi.

De exemplu, o funcție de sincronizare ease-in devine ease-out.

Alterna

Animația alternativă inversează direcția în fiecare ciclu, cu prima iterație în direcția înainte . Numărarea este pentru a determina dacă un ciclu este impar sau par începe la unu.

Alternativ-invers

Alternativa inversă inversează direcția fiecărui ciclu, prima iterație fiind redată înapoi . Numărarea este pentru a determina dacă un ciclu este par sau impar, începând cu unu.

Scurtătura CSS pentru direcția animației

Veți fi uimit să știți că puteți seta, de asemenea, diverse proprietăți de animație, inclusiv direcția animației, care se poate face folosind proprietatea CSS de prescurtare a animației.

Proprietatea scurtătură de animație CSS aplică animația între stiluri. Este o metodă scurtă de a seta toate proprietățile animației, cum ar fi numele animației, durata animației, funcția de sincronizare a animației, întârzierea animației, numărul de iterații ale animației, direcția animației, modul de completare a animației și redarea animației. stat.

Probleme comune de animație CSS

Indiferent dacă animația dvs. nu funcționează așa cum doriți sau pur și simplu nu funcționează deloc, iată câteva motive pentru probleme și cum să le rezolvați:

Fără regulă @keyframes

În animațiile CSS, regula @keyframes definește modul în care arată animația. Mai precis, definește ce stiluri de elemente se schimbă și când. Fără această regulă, elementul tău nu va avea nicio animație de utilizat. Deci data viitoare, verificați dacă regula dvs. @keyframes există și dacă numele acesteia se potrivește cu cel al numelui animației pentru elementul vizat.

Durata animației nu este setată

Să presupunem că ați atribuit elementului o regulă de cadre cheie, dar tot nu pare să fie redată dacă nu ați setat o durată de animație. În mod implicit, durata de zero secunde este ciclul de animație CSS.

Pentru a anula acest ciclu, trebuie să încorporați o regulă de durată a animației în elementul vizat cu o valoare de secunde, la fel ca în același bloc ca și numele animației.

Animația începe prea devreme

Uneori ar putea fi necesar să prezentați o amânare rapidă mai devreme decât începutul animației pentru o experiență mai bună pentru consumator. Realizați acest lucru cu obiectele de animație-amânare.

Proprietăți CSS neanimabile

Un alt motiv pentru care animația nu funcționează poate că încercați să animați o proprietate CSS care nu este animabilă.

Animația CSS nu este acceptată

Animații CSS picturi pe browserele mobile și computere maxime din zilele noastre. Cu toate acestea, animațiile dvs. nu vor funcționa dacă utilizați un browser mai vechi sau un model de browser care nu a fost actualizat de mulți ani, fără îndoială din cauza pierderii asistenței pentru browser.

Dacă ați actualizat browserul și, totuși, aveți probleme, încercați să includeți politicile de animație cu prefixele furnizorului mai departe în politicile dvs. autentice și încercați din nou animația.

Stenografia CSS scrisă incorect

Scurtarea CSS este o modalitate excelentă de a nota CSS de curățare și de a reduce cantitatea de cod din fișierul dvs. Lucrările de animație sunt prescurtare pentru acele case CSS:

• perioada-animatie
• animație-apel
• animație-amânare
• regia-animatie
• animație-umplere-mod
• animație-iterație-se baza
• animație-play-nation
• Funcție de animație-sincronizare

Sunt necesare două valori - una pentru perioada de animație și una pentru apelul de animație. Pe lângă acestea, ordinea valorilor determină ce preț este alocat cărei obiecte de animație aparțin.

Valorile nealiniate ar trebui să aducă o animație care se comportă altfel decât vă așteptați. Deci, dacă folosirea scurtăturii animației aparține, atunci asigurați-vă că valorile sale sunt indexate în ordinea corectă.

Performanță lentă

Animațiile CSS au tendința de a fi mai ridicate pentru performanța generală decât diferitele tipuri de animații pe internet. Cu toate acestea, acum nu mai toate animațiile CSS sunt egale, iar câteva modele pline de viață vor scădea treptat performanța generală mai mult decât altele.

Cele mai ușoare animații CSS pur și simplu nu au niciun efect major asupra timpilor de încărcare a paginilor web. Cu toate acestea, cu cât încarci rezultate mai mari în animația ta, cu atât este mai probabil să întâmpinați probleme generale de performanță.

Pentru a evita performanța generală proastă, Google recomandă să restricționați utilizarea animațiilor care provoacă revopsiri. O vopsea este în timp ce browserul care creează afișarea vizibilă a pixelilor unei pagini web de internet cu ajutorul pixelului de pe ecran. Vopselele folosesc o cantitate semnificativă de putere de procesare, așa că trebuie să restricționați cât mai mult posibil varietatea mare de vopsele din cauza animațiilor.

Din păcate, casele CSS maxime animabile provoacă o revopsire în timp ce sunt schimbate. Excepțiile de la această transformare (pentru lucruri cum ar fi scara, rotația și poziția) și opacitatea, care pot fi pline de viață, cu un impact minim asupra performanței generale. Iată o referință pentru care casele CSS provoacă revopsiri în timp ce sunt pline de viață.

Totuși, nu permiteți ca acest lucru să vă descurajeze să anulați complet animațiile. Dacă aveți probleme cu ritmul, probabil că doriți să executați multe imediat sau să utilizați animația pentru cel puțin un detaliu masiv sau organizarea elementelor.

Pe site-uri web, animațiile CSS sunt de prim rang, în timp ce sunt folosite subtil pentru a înfrumuseța experiența, așa că nu uitați dacă doriți sau nu o animație complexă pentru a interacționa cu vizitatorii.

Ultimul cuvânt

Da, HubSpot vă permite să controlați direcția animațiilor folosind codul CSS corect. Bine! Sunt total de acord că proprietatea de direcție a animației CSS este un lucru de care mulți oameni nu sunt conștienți.

Dar da, după ce ai citit acest blog, cu siguranță vei fi familiarizat cu modalitățile prin care poți controla animațiile și să dai un aspect atrăgător și ușor de utilizat designului site-ului tău. Deci ce mai aștepți? Pregătește-te să construiești un design care să atragă publicul țintă.

Încă mai aveți nevoie de ajutor în proiectarea unui site, nu ezitați să ne contactați. Experții noștri vă vor ajuta cu același lucru.

Editor: Divya