Dați viață paginilor dvs. web cu animații și tranziții CSS

Design-urile site-urilor sunt în continuă evoluție. De la design responsive, tipografie frumoasă, scheme perfecte de codare a culorilor, ilustrații, creatorii site-ului web vin cu idei și design noi în fiecare zi.

Utilizatorii din zilele noastre au așteptări mari de la interfețele utilizator din cauza conținutului de înaltă calitate disponibil pe internet. Pe măsură ce interfețele site-ului web evoluează, la fel și tehnologia din spatele lor. O componentă majoră responsabilă pentru îmbunătățirea interfeței site-ului web este CSS .

CSS sau Cascading Style Sheets sunt responsabile pentru a face site-urile mult interactive prin definirea stilului, aspectului, design-urilor. Cel mai recent standard pentru CSS, adică CSS3, a introdus conceptul de animații și transformări care îmbunătățesc experiența utilizatorului prin adăugarea de profunzime suplimentară interfeței cu utilizatorul. Cu animațiile și tranzițiile CSS, puteți spune povești, puteți crea efecte generoase și puteți face interacțiunea utilizatorului cu site-ul dvs. mult mai eficientă și semnificativă.

O animație este doar o simulare a mișcării care este creată prin afișarea unei serii de obiecte precum imagini, una după alta. Tranziția, pe de altă parte, este practic un proces în care un obiect se schimbă de la o stare la alta. Dar, atunci când vorbim despre animații web, există în esență trei tipuri – animații CSS sau animații cadru cheie, tranziții CSS și animații JavaScript .

Animații CSS

Pentru a crea animații în CSS trebuie să schimbăm proprietățile CSS ale unui element, cum ar fi o imagine sau un text, pentru o anumită perioadă de timp. Putem schimba proprietățile elementelor de câte ori vrem și putem seta și durata animației.

Specificarea @keyframes

Animațiile CSS sunt biți definiți cu cadre cheie. Aceste cadre cheie sunt punctele intermediare ale animației. Toate animațiile CSS sunt specificate sub regula @keyframes. Aceste cadre cheie specifică ce se întâmplă cu elementul la un anumit moment, adică

• ce proprietăți se schimbă
• când elementul se anime
• cum se anima elementul

Vă puteți defini propriul cadru cheie ca:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Aici „la” și „de la” specifică începutul și sfârșitul animației. De asemenea, putem specifica animații pentru momente intermediare de timp între început și sfârșit, astfel:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Aici 0% reprezintă începutul animației, 100% reprezintă sfârșitul animației și 50% înseamnă schimbarea dintre început și sfârșit. Dar, cum îi spunem browserului cât timp ar trebui să aibă loc animația? Facem acest lucru cu ajutorul anumitor proprietăți de animație . Aceste proprietăți de animație sunt asociate cu elementul care urmează să fie animat. De exemplu:

element_name
{
animation_property: value;
style_property: value;
}

Aici elementul ar putea fi orice etichetă HTML, cum ar fi div, span, img, p etc. și style_property este orice proprietate de stil CSS, cum ar fi background_color, width, height etc. Să ne uităm acum la câteva proprietăți de animație în detalii.

1. @keyframes : cadrele cheie sunt folosite pentru a specifica codul de animație, așa cum sa discutat mai sus.
2. animation-name : Numele specificat cu @keyframes este numele animației. Acest nume este folosit pentru a face referire la cadrele cheie cu elementul care urmează să fie animat.
3. animation-duration : este folosit pentru a specifica durata animației în secunde sau milisecunde. De exemplu, dacă o setăm la 5 secunde atunci, animația va rula doar 5 secunde. Dacă nu setăm această proprietate, atunci animația nu va rula deloc, deoarece valoarea sa implicită este 0.
4. animation-delay : Putem întârzia începerea animației prin specificarea timpului de întârziere a animației. De exemplu, dacă doriți să începeți animația la 5 secunde după ce pagina se încarcă în browser, setați doar întârzierea animației la 5 secunde.
5. animation-direction : Putem spune browserului dacă o animație se mișcă în direcția inversă sau alternează cicluri cu această proprietate. De exemplu, dacă doriți ca animația să ruleze de la început până la sfârșit, setați valoarea animației-durată ca „normală”. Dacă doriți să ruleze de la capăt la început, setați doar valoarea la „inversare”.
6. animation-fill-mode : Putem specifica stilul elementului atunci când animația nu se joacă cu acest mod, adică când animația este întârziată sau terminată, atunci care ar trebui să fie stilul elementului.
7. animation-iteration-count : Numărul de ori când poate fi redată o animație este reprezentat de această proprietate. De exemplu, dacă doriți să redați animația odată setată-o la 1 sau dacă doriți ca animația să fie redată pentru totdeauna, setați-o la „infinit”.
8. animation-timing-function : Această proprietate este folosită pentru a specifica curba de viteză a animației, cum ar fi liniară, accelerație sau de-accelerare.
9. Animație : este proprietatea scurtă pentru setarea tuturor proprietăților animației.

De exemplu, puteți anima un obiect care sară cu următorul fragment de cod. Observați cum a fost folosită notația scurtă pentru animație aici.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Tranziții

Tranzițiile CSS sunt aplicate proprietăților elementelor pentru o anumită durată de timp, bazate pe anumite funcții de sincronizare, numite funcții de relaxare. Prin funcție de sincronizare, înțelegem o funcție care va schimba proprietățile elementelor de la o stare la alta, cum ar fi progresia liniară, accelerarea sau deaccelerarea. S-ar putea să fi observat că o imagine alunecă sau se transformă într-o altă imagine la trecerea cursorului sau un sunet este redat la clic de mouse. Acestea sunt toate efectele de tranziție care pot face un site web interactiv.

Funcțiile de ușurare sunt importante pentru crearea tranzițiilor. Acestea specifică cum se vor schimba proprietățile. De asemenea, pot modifica rata la care valoarea proprietăților se schimbă de la punctul de pornire la punctul final al unei tranziții. Puteți aplica tranzițiile în felul următor:

element 
{
style_property: value;
transition_property: value;
}

Aici element specifică elementul HTML pe care doriți să-l transformați, cum ar fi div, H1, img etc. style_property este stilul CSS aplicat pe acel element. Să ne uităm acum la câteva proprietăți de tranziție :

• transition-property : efectul de tranziție va fi întotdeauna aplicat proprietății CSS a unui element, cum ar fi lățimea, înălțimea, culoarea sau forma acestuia. Valoarea acestui atribut specifică acea proprietate CSS a elementului. Efectul de tranziție va începe ori de câte ori această proprietate se schimbă, de exemplu la trecerea mouse-ului sau la clic.
• transition-timing-function : Aceasta este funcția de ușurință care trebuie aplicată elementului. Această proprietate este utilizată pentru a specifica curba de viteză a tranziției, cum ar fi ease-in, ease-out, liniară etc.
• transition-duration : este la fel ca proprietatea animation-duration. Este folosit pentru a specifica durata de timp a efectului de tranziție în secunde sau milisecunde. De exemplu, dacă îl setăm la 5 secunde atunci, tranziția va afecta se va finaliza în 5 secunde. Dacă nu setăm această proprietate, atunci nu va exista deloc tranziție, deoarece valoarea sa implicită este 0.
• transition-delay : Cu această proprietate, putem specifica durata de timp pentru a întârzia efectul de tranziție. De exemplu, dacă doriți să începeți efectul la 5 secunde după trecerea mouse-ului, setați doar întârzierea tranziției la 5s.
• tranziție : este proprietatea scurtă pentru setarea împreună a tuturor proprietăților de tranziție de mai sus.

De exemplu, următorul cod va schimba lățimea elementului div la trecerea mouse-ului. Vedeți proprietatea scurtă de tranziție aplicată aici.

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animații vs. Tranziții

Asemănări între animații și tranziții

• Atât tranziția, cât și animația sunt utilizate pentru a vizualiza modificările în proprietățile unui element.
• Putem specifica durata pentru cât timp ar trebui să aibă loc tranziția și animația.
• Avem anumite funcții de sincronizare pentru a modifica rata de trecere de la o valoare la alta pentru tranziții, precum și animații.

Diferențele dintre animații și tranziții

• Tranzițiile CSS sunt reactive . Ele trebuie declanșate de utilizatori. Pe de altă parte, animațiile rulează ori de câte ori pagina se încarcă în browser. Nu trebuie să fie declanșate.
• Tranzițiile rulează o dată și apoi se opresc. Apoi, trebuie să le declanșăm din nou și din nou în timp ce animațiile pot fi bucle . Ei pot începe pe propria oprire și apoi pot începe din nou.
• Browserul are grijă de tranziții în sine. Trebuie doar să specificăm începutul și sfârșitul tranziției. Putem seta efectul de tranziție, dar nu putem modifica rata de schimbare a unei tranziții între ele. De exemplu, dacă o imagine alunecă la trecerea mouse-ului, o vom vedea doar cum se estompează sau se estompează pe măsură ce trecem cu mouse-ul peste ea.
• Animațiile, pe de altă parte, oferă flexibilitatea de a schimba proprietățile între început și sfârșit. Acest lucru se întâmplă cu ajutorul cadrelor cheie. De exemplu, putem seta culoarea unei imagini la roșu pentru primele 5 secunde, apoi la albastru pentru următoarele 5 secunde, apoi la verde pentru următoarele 5 secunde și la galben pentru ultimele 5 secunde ale animației. Prin urmare, avem control asupra animațiilor.

Prefixe de furnizor

Toate caracteristicile CSS3 nu sunt acceptate de fiecare browser. Prin urmare, folosim prefixe de-a lungul acelor proprietăți CSS pentru browsere specifice, cum ar fi -webkit- (Safari), -moz- (Firefox) sau -o- (Opera). Acest lucru permite marcatorilor browserului să adauge un suport pentru acea caracteristică CSS3. Aceste prefixe sunt cunoscute ca prefixe de furnizor sau prefixe de browser CSS . Prin urmare, trebuie să punem și prefixele furnizorului împreună cu proprietățile de animație și tranziție. De exemplu, luați în considerare codul de mai jos și vedeți cum au fost folosite prefixele furnizorului pentru Safari:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Bacsis! Puteți evita această agitație folosind biblioteci precum -prefix-free . Este o bibliotecă JavaScript care va adăuga prefixul browserului curent la orice cod CSS. Consultați multe astfel de biblioteci disponibile pe web.

Concluzie

Dezvoltatorii de site-uri web pot aplica animații și transformări pentru a atrage utilizatori pe site-urile dvs. Le puteți folosi pentru a îmbunătăți formulare, notificări, grafice de fundal, imagini, diagrame, doodle-uri, butoane de apel la acțiune și ce nu. Folosește-ți doar imaginația și poți găsi o modalitate de a-ți uimi utilizatorii. Amintiți-vă că chiar și o mică modificare a site-ului dvs. web îl poate face să arate mult mai bine și să-i crească valoarea. Deci, ați folosit încă animații pe site-ul dvs. web? Împărtășiți-vă gândurile despre utilizarea animațiilor și tranzițiilor.