Cum să utilizați tranzițiile și animațiile CSS3 pentru a evidenția modificările UI

Designerii și artiștii au o lungă istorie de experimentare cu mișcări, efecte și diferite tipuri de iluzii, cu scopul de a adăuga un strat suplimentar la munca lor. Mișcarea op art a început să folosească iluzii optice în anii 1960 pentru a da impresia de mișcare.

De atunci au apărut abordări mai noi și mai noi, cum ar fi arta cinetică recent populară care extinde perspectiva spectatorului prin utilizarea mișcării multidimensionale. Mișcarea a apărut și în domeniul informaticii, cu inventarea primului cursor care clipea în 1967.

În dezvoltarea front-end, elementele DOM au fost de obicei animate de JavaScript înainte de lansarea CSS3 și este o metodă care încă funcționează, dar noile proprietati introduse de CSS3 ne permit sa imbunatatim designurile noastre cu efecte și mișcare diferite într-un mod mai intuitiv.

Cele două tehnici principale oferite de CSS3 sunt tranzițiile și animațiile. În acest post vom analiza ceea ce sunt, ce este diferența dintre ele și cum le puteți folosi.

tranziţii

Sunt folosite ambele tranziții și animații vizualizați schimbările în stare a unui element HTML prin modificând una sau mai multe proprietăți CSS.

Cea mai simplă formă de vizualizare a schimbării de stare schimbă culoarea unui buton sau a unui link atunci când acesta este plutind. Când se întâmplă, elementul are un stil ușor diferit, care este de obicei observat de către privitor ca și cum ceva s-ar fi mutat pe ecran.

Modificarea proprietăților CSS a unui link pe hover (sau focalizare sau clic) este cea mai veche și mai simplă formă de tranziții și a existat cu mult înainte de epoca CSS3.

 a culoare: portocalie;  a: hover culoare: roșu;  a: focalizare culoare: albastru;  a: vizitat culoare: verde; 

Transitions sunt folosite atunci când un element HTML se schimbă de la o stare predefinită la alta. CSS3 a introdus proprietăți noi care permit vizualizări mai sofisticate decât înainte, cum ar fi funcțiile de sincronizare sau controlul duratei.

Vom analiza noile proprietati CSS in urmatoarea sectiune, dupa ce intelegem cum difera animatiile. Pentru moment, să vedem cele mai importante lucruri pe care trebuie să le știi despre tranziții.

1. Ei au întotdeauna o stare de început și de sfârșit.
2. Stările între punctele de început și sfârșit sunt definite implicit de browser, nu putem schimba acest lucru cu CSS.
3. Ei cer declanșarea explicită, cum ar fi adăugarea unui nou pseudoclass de către CSS sau o nouă clasă de către jQuery.

Puteți vedea un exemplu minunat de tranziții CSS3 inteligent utilizate, în care autorul dezvăluie informații ascunse într-un mod care nu este intruziv, dar încurajează totuși utilizatorii să se concentreze pe noul conținut.

Animații

Dacă vrem să vizualizăm schimbările de stat cu mișcări mai complicate sau dacă nu avem declanșator explicit, de ex. dacă dorim să începem efectul când pagina se încarcă, animațiile sunt calea de parcurs.

Animațiile fac posibilă definirea unei căi mai complexe prin configurarea și configurarea propriului nostru keyframes. keyframes sunt puncte intermediare în cursul animației, care ne permit să schimbăm stilul elementului animat ori de câte ori ne dorim.

Deși CSS3 oferă modalități excelente de a crea animații sofisticate, este de obicei mai dificil să le creați decât tranziții, de aceea există multe biblioteci de animație extraordinare care pot facilita munca noastră.

Cele mai importante lucruri pe care trebuie să le cunoașteți despre animațiile CSS3 includ:

1. acestea nu necesită declanșare explicită, pot începe la încărcarea paginii sau când are loc un alt eveniment DOM în browser
2. acestea pot fi folosite în cazurile în care se utilizează tranziții, de exemplu atunci când se adaugă sau se elimină o clasă sau o pseudoclasă nouă (deși este un caz de utilizare mai puțin frecvent)
3. ele necesită definirea unor cadre cheie (stări intermediare)
4. putem specifica numărul, frecvența și stilul acestor cadre cheie

În exemplul de mai jos puteți vedea un meniu derulant animat răcoros. Animația începe când apăsăm pe buton. Acest lucru este realizat prin adăugarea de clase suplimentare la elementele listă cu jQuery la apariția evenimentului clic.

Aceste clase noi sunt animate cu specificate @keyframes în fișierul CSS. Clasele suplimentare sunt eliminate de jQuery atunci când utilizatorul face clic pe buton data viitoare și meniul devine din nou ascuns.

Proprietățile CSS și @keyframes La-Regulă

Pentru tranziții putem folosi fie tranziție proprietatea stenografică sau 4 proprietăți legate de tranziție: tranziție-proprietate, durata tranziției, tranziție-sincronizare-funcție, și tranziție întârziere. Proprietatea stenografică conține toate proprietățile unice într-o formă abreviată.

Pentru animații există animaţie proprietatea shorthand în mâinile noastre, care reprezintă nu mai puțin de 8 proprietăți animație unică, și anume animație nume-, animație durată, animație-sincronizare-funcție, animație întârziere, animație-iterație-count, animație direcția, animație-fill-mode, și animație-play-stat.

Cel mai important lucru cu ambele tranziții și animații este că întotdeauna trebuie să specificați proprietățile CSS care vor fi modificate în timpul schimbării de stare. Cu tranziții se arată astfel:

 .element fundal: portocaliu; proprietate de tranziție: fundal; durată de tranziție: 3s; funcția de tranziție-temporizare: ușurință; . element: hover fundal: roșu; 

Am specificat fundal proprietate, deoarece aceasta este ceea ce va fi schimbat în timpul tranziției.

Putem modifica mai mult de o proprietate CSS într-o singură tranziție, în acest caz codul de mai sus va fi modificat astfel: proprietate de tranziție: fundal, frontieră;. Putem folosi, de asemenea, proprietate tranzitorie: toate;, dacă nu vrem să specificăm fiecare proprietate separat.

Putem alege stenograma tranziție proprietate, de asemenea. Dacă facem acest lucru, întotdeauna trebuie să fim atenți la ordinea corectă a proprietăților interioare (vezi sintaxa din docs).

 .element fundal: portocaliu; tranziție: 3s ușurință în fundal; . element: hover fundal: roșu; 

Dacă vrem să creăm o animație, suntem obligați să specificăm contextul asociat keyframes. Proprietățile CSS trebuie modificate în mod separat @keyframes la-reguli. Iată un exemplu despre cum putem face acest lucru:

 .element poziție: relativă; animație-nume: diapozitiv; animație-durată: 3s; animație-funcția de sincronizare: ușurință;  @ slideframe cheie 0% stânga: 0;  50% left: 200px;  100% left: 400px; 

În exemplul de mai sus am creat un efect de alunecare foarte simplu. Am definit animație nume-, apoi legat 3 cadre cheie la el pe care le-am specificat în @ slideframe cheie ... la-reguli. Procentele se referă la durata animației, astfel încât 50% se întâmplă la 1,5 s în exemplul respectiv.

Am putea folosi stenograma animaţie proprietate, sau ar putea defini cadrele cheie cu cele mai simple de la catre regula în modul următor:

 .element poziție: relativă; animație: slide 3s easy-in;  @ slideframe cheie din stânga: 0;  la left: 400px; 

Crearea de animații mai complexe este propria sa formă de artă, dacă sunteți interesat, puteți citi două dintre tutorialele noastre de animație despre cum să creați o marcă avansată și cum să creați un efect de respingere.

Când construiți tranziții și animații, trebuie să știți asta nu toate proprietățile CSS pot fi animate, deci este întotdeauna o idee bună să verificați proprietatea pe care doriți să o modificați în CSS Animatable.

Animațiile și tranzițiile CSS3 au funcționat pentru mai mult timp cu prefixele furnizorilor, pe care nu mai trebuie să le folosim, cu toate acestea, rețeaua Mozilla Developer Network încă recomandă adăugarea -WebKit prefix pentru un timp, deoarece suportul pentru browserele bazate pe Webkit a atins doar recent stabilitate.