Share
CSS sa maturizat în multe moduri de-a lungul anilor, nu în ultimul rând în ceea ce privește animațiile CSS. Cu fiecare zi care trece mai mult și mai mulți dezvoltatori creează interfețe vii, respirație. În acest articol vom analiza starea animațiilor CSS, cum a crescut, ce este capabil astăzi și care acoperă câteva resurse și instrumente disponibile. Să ne mișcăm!
Folosirea animației pe web crește, în mare parte datorită tranziție și @keyframes adăugări la CSS. Odată a existat un moment în care animațiile și CSS nu s-au cunoscut unul pe altul, dar acest lucru nu este cazul astăzi. Articolele, tutorialele, cursurile premium și chiar liniile directoare pentru mișcare sunt mult mai accesibile acum decât au fost odată. combinarea @keyframes cu animaţie proprietate, împreună cu tranziție a dat in sfarsit dezvoltatorilor sansa de a crea o miscare corecta si de a da interfetelor o personalitate si o viata o data neconcepute.
Din liniile directoare pentru materialele GoogleNu a existat niciodată un moment mai interesant pentru animațiile CSS și designul de interacțiune decât acum!
Implementarea actuală a animaţie proprietatea permite dezvoltatorilor să controleze durata, calendarul, întârzierea, numărul iterațiilor, direcția, modul de umplere și starea de redare. Partea de sincronizare permite, de asemenea, a etapele () funcţie. Această funcție specială de sincronizare rupe o animație sau o tranziție în segmente (ca o bandă de film), mai degrabă decât ca o tranziție continuă de la o stare la alta. Cadrele cheie permit dezvoltatorilor de mișcare să declare pozițiile utilizând din, la și chiar procentele de animat între valorile de proprietate declarate. Asta-i un început minunat, dar vom discuta într-un moment în care acesta este scurt.
Apoi este gloriosul tranziție proprietate; o proprietate la fel de fantezie ca animaţie și una care ne permite să controlam viteza de animație atunci când schimbăm proprietățile. Procesul de tranziție între două state este de obicei denumit a tranziție implicită; un termen care descrie stările între starea inițială și cea finală, definite implicit de browser. În prezent, tranzițiile permit personalizarea proprietății, calendarul, durata și întârzierea.
Video-ul intro de mai sus este preluat de la Up și Running With Transitions de CSS de Craig Campbell.
Animația CSS ar putea fi puternică în timp ce se află, dar încă nu are un aspect deosebit care animatorii doresc cel mai mult; controlul temporal-esque. Ceea ce vreau să spun sunt secvențe care pot fi influențate și manipulate pe baza timpului.
@frame-cheie de mutare-obiect de la proprietatea pozitiei initiale si valori la 2s face acest lucru asteptati-pana la 4s acest lucru se intampla la stop position property and values
Sintaxa de mai sus nu există, ci vizează o imagine mai detaliată a experților de animație de pe web. GreenSock, de exemplu, este bine cunoscut pentru acest tip de secvențiere, dar, din păcate, se întâmplă doar în JavaScript. Nu ar fi minunat să ai și asta în CSS? așa cred.
Video de mai sus preluat de la Platforma de animație GreenSock: Primii pași de Craig Campbell.
Cu siguranță există capacitatea de a controla animaţie și tranziție evenimente prin utilizarea JavaScript pentru controlul granular al unei secvențe. Cu ajutorul JavaScript, dezvoltatorii pot detecta începutul fiecărei iterații noi de animație, atunci când are loc o animație, când animația se termină și același lucru este valabil și pentru evenimentele de tranziție.
Acestea sunt momente destul de incitante pentru uneltele dezvoltatorilor de browsere pentru a inspecta si ajusta animatiile CSS. Cele mai multe browsere (Firefox, Chrome) permit inspectarea animațiilor CSS în ceea ce privește Safari și Edge. Din ceea ce mi-a fost spus de o sursă care lucrează pentru Microsoft, inspecția animațiilor este ceva pe care echipa Microsoft vrea cu adevărat să o facă. Să sperăm că acest lucru este același pentru Safari.
În ceea ce privește browserele do suport animație de control avem următoarele abilități ...
Accentsconagua
::inainte de și ::după pseudo-elementele.keyframes proprietăți și valori în zbor.keyframes numele.În timp ce dezvoltatorii au destul de mult de ales în baza listei de mai sus, ei mai au nevoie de mai multe instrumente pentru animații în ceea ce privește interacțiunea cu utilizatorul. Acest lucru ar putea fi, de asemenea, cunoscut sub numele de interpolarea proprietăților, introducerea unei valori intermediare într-o serie prin calcularea ei din valorile cunoscute din jur; la fel ca atunci când treceți la o nouă valoare cu tranziții. Aceste animații dinamice / reactive pot începe oricând, sunt nedefinite și au durate variabile bazate pe interacțiunea utilizatorului. Ceva din nou, care nu poate fi depistat sau inspectat de la orice instrument de dezvoltare oferit de un browser în acest moment.
Viitorul arată strălucitor pentru animația CSS, deși cu tot ce-i privește specul, tinde să se miște încet. CSS mișcare-path modul, conține, se va schimba si preferă redusă mișcare solicitarea media (care nu este încă standard și numai WebKit) reprezintă funcțiile actuale pentru animatorii CSS.
Căile de mișcare permit dezvoltatorilor să animeze orice obiect grafic de-a lungul unei căi specificate de autor. Puteți defini o cale într-un mod foarte asemănător definit de SVG 1.1.
.elementul meu motion-path: path ('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7 , 0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4 z '); mișcare-offset: 0; mișcarea-rotație: invers; mișcare-path definește o cale pe care un element o va urma sau o va muta. Al nostru Mișcare de offset proprietatea este plasarea poziției elementului undeva pe cale. Proprietatea mișcare de rotație este direcția în care elementul "se confruntă" pe măsură ce se mișcă de-a lungul căii.
Check out aceste colecții de demo-uri pe CodePen de la Dan Wilson, care oferă exemple live mișcare-path capabilități.
se va schimba proprietatea oferă o modalitate pentru autori de a sugera browserelor cu privire la tipul de schimbări care sunt așteptate pentru un element. Acest lucru permite browserului să configureze optimizările adecvate înainte ca elementul să fie efectiv schimbat.
.elementul meu will-change: transform;
Acest tip de optimizare poate îmbunătăți timpul de încărcare perceput și aspectul unei pagini prin finalizarea lucrărilor scumpe înaintea timpului, înainte de a fi efectiv necesare. Spunând asta, sa sugerat că dezvoltatorii nu se aplică se va schimba la prea multe elemente, deoarece poate consuma resurse și poate cauza o încetinire a paginii.
Această adăugare non-spec la WebKit creează stiluri care evită zonele mari de mișcare pentru utilizatorii care specifică o preferință pentru mișcarea redusă în Preferințe sistem.
@media (preferă-redusă-mișcare) .my-element animație: none;
Aceasta este mai mult o situație de accesibilitate față de crearea reală a mișcării. Un interesant care să ia în considerare totuși și la unul pentru a verifica afară în timpul tău liber.
Acest modul CSS indică faptul că subtreea elementului este independentă de restul paginii, permițând astfel optimizările grele de către agenții utilizator atunci când sunt utilizați corect. Cea mai interesantă pentru animatorii CSS este a picta valoare care poate fi trecută.
.element-cu-mișcare conține: vopsea;
În cazul în care elementul care se află în afara ecranului sau este ascuns, browserul poate ignora direct conținutul său, deoarece este garantat că este off-screen sau acoperit. Acest lucru oferă în cele din urmă valoare prin asigurarea unei conducte de randare mai rapide în timpul unei vopsele inițiale. Acesta este în prezent un proiect de lucru la W3C.
Există o mulțime de modalități de a ține pasul cu animațiile CSS. Mai jos sunt câteva instrumente și resurse, inclusiv specificații care pot fi citite în timpul tău liber. Dacă știți despre alte resurse minunate și utile, vă rugăm să ne anunțați în comentarii și le vom adăuga în listă. Animație fericită!
