Share
Animația CSS3 este destul de darn cool. Ne permite să oferim o durată de viață hardware accelerată site-urilor noastre plictisitoare anterior. Cu toate acestea, există câteva capcane și practici majore pe care ar trebui să le cunoașteți - să ne grăbim.
Suportul browser-ului pentru animația CSS3 este în plină ascensiune - Mozilla Firefox sa alăturat WebKit în sprijinul deplin, iar Internet Explorer 10 și Opera 12 și-au promis sprijinul viitor. Aceasta înseamnă că putem începe să le folosim fără teamă astăzi. Cu toate acestea, acest sprijin înfloritor nu vine fără problemele sale.
Fiind o proprietate născută și născută în Webkit, vă așteptați ca animația CSS să aibă suport complet în toate browserele Webkit. Din păcate, nu este așa de simplu. Browserul încorporat în dispozitive Android face animații de sprijin - într-o oarecare măsură. Problema este că va sprijini numai animațiile cu o singură proprietate în schimbare.
Deci, să spunem că am vrut să lucrăm cu animația mea animate, animate.css, pentru a face un site super cool. Majoritatea animațiilor, cum ar fi bounceInLeft, vor funcționa excelent pe cele mai recente Safari Chrome, Safari, Firefox și iOS. Dar pe un dispozitiv Android, utilizatorul nu va vedea un singur element animat. Animația rulează, dar elementul dispare de îndată ce se termină.
Această mișcare ciudată înseamnă că singurele animații pe care le putem rula pe dispozitivele Android sunt cele unice, cum ar fi fadeIn și bounce. Din păcate, nu este clar dacă Android 4.0 va oferi sau nu suport mai bun - sperăm că va.
Până când vom vedea un sprijin mai mare de la aceste dispozitive Android, cel mai bun pariu este de a oferi Javascript backbacks sau animații mai puțin complexe. Dar cum puteți spune site-ului dvs. să nu utilizeze animațiile dvs. super cool pe aceste dispozitive? Utilizarea Modernizr nu va ajuta aici - va detecta că browserul acceptă animații. Din fericire, putem verifica agentul utilizator și putem servi o foaie de stil sau un script alternativ. În PHP, este la fel de ușor ca aceasta:
$ ua = strtolower ($ _ SERVER ['HTTP_USER_AGENT']); dacă (strips ($ ua, 'android')! == false) // && stripos ($ ua, 'mobile')! == false) $ css = "droid-style.css"; altceva $ css = "style.css";
Fragmentul respectiv se va încărca droid-style.css pe dispozitivele Android, ceea ce înseamnă că putem păstra animațiile pantalonilor fanioni pentru browserele care le pot folosi. Excelent!
Dispozitivele iPhone, precum iPhone și iPad, au un suport excelent pentru animațiile CSS3, cu o accelerație hardware completă - dar numai dacă este o transformare 3D. Dacă animația nu implică o transformare 3D, va fi accelerată doar de software, ceea ce poate duce la animații lagheză.
Pentru a obține o accelerație completă de hardware pe animații, trebuie să activați motorul de randare 3D. Este la fel de ușor ca adăugarea acestei reguli în CSS:
.container -webkit-transform: translateZ (0);
Grozav! Dar de ce să nu aplicați această regulă corp? Ei bine, dintr-un motiv oarecare, activarea motorului 3D joacă puțin cu aspectul paginii. Elementele fixe sau absolut poziționate se vor schimba ușor cu cele aplicate corpului.
Ca și în cazul tuturor lucrurilor din lumea CSS3, acest truc inteligent vine la un cost. Nu este una gravă, ci un cost, totuși. Aruncați o privire la această comparație științifică:
Este nevoie de un ochi fermecat pentru ao vedea, dar activarea motorului de randare 3D face antialiasingul tonului de gri al textului - aceasta are ca rezultat un text ușor mai accentuat și este deosebit de vizibil la dimensiunile extrem de mici sau extrem de mari ale textului. Asa cum am spus, nu este un biggie, dar este inca un bug. adăugare -webkit-font-smoothing: antialiased; poate ajuta la reducerea ușoară a problemei pe browserele Webkit.
Să presupunem că trebuie să mutați un element dintr-un loc în altul, fără a afecta aspectul paginii. Traduceți este cel mai bun prieten aici - proprietatea traducătoare, așa cum este definită de W3C:
... nu afectează fluxul conținutului din jurul elementului transformat. Cu toate acestea, valoarea zonei de supraînălțare ia în considerare elementele transformate.
Vezi asta? Nu afectează fluxul de conținut înconjurător. Dar face afectează depășirea documentului. Acest lucru înseamnă că, dacă mutați un element în afara paginii (ceea ce este cazul pentru câteva animații pe Animate.css), aceasta va cauza derularea barelor de derulare.
Browserele tratează acest comportament în mod diferit între ele. Safari și Chrome vor crea barele de derulare, dar odată ce transformarea este completă și opacitatea elementului va scădea la zero, va elimina barele de derulare, ca în cazul în care elementul a fost eliminat. Firefox, pe de altă parte, creează bare de derulare persistente care vor rămâne până când elementul va fi eliminat din document sau setat la afișare: niciuna. Cea mai bună modalitate de a lucra cu aceste transformări este să folosiți o mică magie Javascript. Dacă știți durata animației dvs., ar trebui să eliminați elementul din DOM după finalizarea animației. În mod alternativ, puteai urmări când animația este completă cu un Javascript inteligent:
Accentsconagua
var element = document.getElementById ("caseta #"); element.addEventListener ("webkitAnimationEnd", funcția () this.style.webkitAnimationName = "";, false); document.getElementById ("# button"); onclick = funcție () element.style.webkitAnimationName = "shake"; // probabil veți dori să prevenițiDefault aici. ; Acest fragment mic vine de fapt dintr-un fir de suprapunere Stack. Este unul bun, așa că marchează-l!
Dacă scrieți propria animație CSS, este posibil să observați ceva ciudat pe dispozitivele Safari, Chrome și iOS. Chiar înainte de începerea animației, elementul animat în cauză va clipi în și din vizibilitate chiar înainte de a începe.
Motivul din spatele acestui fenomen este neclar, dar soluția este destul de simplă. Pur și simplu adăugați -webkit-backface-visibility: ascuns; regulă la CSS ar trebui să ajute la prevenirea problemei. Aplicați-l în containerul elementului, după cum urmează:
.container -webkit-backface-visibility: hidden;
Acesta se reduce la o altă problemă de accelerare hardware - folosind această proprietate aruncă pur și simplu accelerația în viteză. Ați putea folosi și lucruri de genul -webkit-perspectivă: 1000; sau alte proprietăți 3D.
Iată câteva adevăruri nefericite cu animații și tranziții CSS. Nu puteți folosi animații sau tranziții pe elemente pseudo. Acest fapt este oarecum slab documentat pe web, dar este unul important. Să zicem, de exemplu, că ai vrut un lucru :după pseudo elementul să se estompeze în vizibilitate atunci când plasați cursorul peste părintele său. Din nefericire, se va rupe între state în loc să se transforme cu grație. Din câte știm, acesta este un comportament neobișnuit: există rapoarte de erori depuse pentru Chrome și Webkit - și Firefox suportă de fapt aceste tranziții. Puteți ține pasul cu starea actuală de asistență pentru tranziții și animații pe pseudo-elemente de la CSS-trucuri.
Cu toate acestea, trebuie remarcat faptul că dacă aplicați tranziții sau animații unui element care are pseudo elemente, acele tranziții vor fi purtate către elementele pseudo.
Și acum pentru o altă lovitură din dinți. Tranzițiile și animațiile resetrează indexul z al unui obiect. Dacă aveți niște obiecte bine stivuite pe care doriți să le animați, vor fi reinițializate comenzile de stivuire. Este un adevăr nefericit și din nou, nu unul despre care vorbesc mulți oameni.
S-ar putea să intru în apă destul de adâncă aici, dar vă puteți face animațiile mult mai realiste jucând cu funcțiile de sincronizare. Dacă doar părăsiți funcțiile de sincronizare implicite pentru animații (ușurință), puteți ajunge cu câteva efecte destul de frumoase. Cu toate acestea, dacă încercați să recreați un model special de mișcare în CSS, este important să aflați diferențele dintre diferitele funcții de sincronizare. Să luăm animația "balamale" din Animate.css ca exemplu.
Ideea din spatele acestei animații a fost ca elementul să scadă din poziția sa actuală, să se răsucească dintr-un singur colț pentru puțin timp, apoi să renunțe complet - cam ca un semn rupt. Iată captura - animația va necesita o varietate de funcții de sincronizare pentru a deveni realistă. Gândiți-vă la această mișcare în viața reală; când semnul scade și începe să se învârtă, se va porni încet, apoi se va accelera, apoi va încetini din nou la vârf. Cu toate acestea, atunci când scade complet, ar trebui să scadă destul de brusc și să accelereze în timp ce cade. Sună că avem nevoie de amândouă ușurința în-out și ușurința în.
De fapt este destul de ușor. În interiorul cadrelor cheie, puteți declara diferite funcții de sincronizare - cum ar fi:
@ balamale de chei 0% animație-temporizare-funcție: ușurință-out-out; transforma: roti (-120deg); transformare-origine: partea stângă sus; 25% animation-timing-function: easy-in-out; transforma: roti (70deg); transformare-origine: partea stângă sus; 50% animation-timing-function: easy-in-out; transforma: roti (-120deg); transformare-origine: partea stângă sus; 100% animation-timing-function: easy-in; transformare: rotire (0deg) translateY (200%);
Folosind o varietate de funcții de sincronizare, mai degrabă decât una implicită, avem un control mai mare asupra modului în care se joacă animația. Dacă executați animația balamalei fără funcțiile personalizate de sincronizare, puteți vedea cât de ciudat apare. atunci când scrieți animațiile, le comparați cu exemplele de viață din aceeași mișcare. Încetați-o în minte și gândiți-vă la modul în care fiecare este programat.
Acesta ar putea fi cel mai important lucru pe care îl luați, ascultă-te. Cred cu tărie că animațiile CSS sunt acolo pentru a fi folosite cu ușurință pentru interacțiune adăugată, și nimic mai mult. Oamenii inteligenți ca Anthony Calzadilla fac niște lucruri nebunești cu animații CSS, dar în opinia mea, în lumea reală, aceste animații ar trebui să fie puține și foarte îndepărtate.
Ia această pagină ca un exemplu. Totul aici (cu excepția gifului animat obligatoriu) este animat folosind CSS. Este un exemplu extrem, dar puteți vedea de ce sunt îngrijorat de excesul de aceste lucruri.
Același lucru este valabil și pentru toate proprietățile CSS3. Tranzițiile, umbrele și gradientele ar trebui folosite cu subtilitate. Cred că pagina de destinație pentru Owlr face un exemplu destul de bun. Trimiterea unui e-mail nevalid sau a unui formular gol va crea o eroare de validare cu câteva animații neesențiale pentru a atrage atenția.
În cartea sa "CSS3 For Web Designers" (care este o mare citire), Dan Cederholm vorbește mult despre "stratul de experiență". El subliniază faptul că toate valorile CSS3 demonstrate în cartea sa sunt doar pentru un nivel suplimentar de experiență - efectele adăugate nu sunt esențiale și ar trebui să se degradeze întotdeauna cu grație în browserele care nu le suportă pe deplin. Țineți minte această regulă și veți deveni mai puternică decât ați putea să vă imaginați. Sau ceva de genul ăsta.
Cele mai multe computere au mai multă putere decât suficientă pentru a rula animații și tranziții CSS3 fără probleme - cu toate acestea, cu cât încercați mai mult să vă pompiți în CSS, cu atât va afecta mai mult performanța.
Luați, de exemplu, o animație simplă care se mișcă a div de la stânga la dreapta infinit. Lucruri simple. Să facem această cutie mai interesantă - să-i dăm o umbra de cutie, umbra de text, poate un gradient ... toate aceste reguli vor afecta performanța paginii. Dacă ți-ai dat div o umbră de cutie cu o rază ridicolă de estompare (vorbesc în sutele de aici), veți observa o scădere severă a performanței. Browserul lucrează atât de tare încercând să-și dea seama cum ar trebui să facă pixelii care alcătuiesc umbra cutiei că începe să creeze resursele necesare animației sau chiar restul paginii - sarcinile simple, cum ar fi derularea, pot deveni dureros de încetinite. Mențineți îmbunătățirile vizuale la minim, în special umbre.
Accelerarea hardware ajută la prevenirea acestei probleme, dar este totuși o problemă de conștientizare. Nu toți utilizatorii dvs. vor avea luxul de accelerare hardware, iar programele grafice oferite de software pot lua taxele pe computer.
Sperăm că sunteți mai conștient de unele dintre capcanele din animația CSS3 și de toate quark-urile de browser încrucișat decât ați fost înainte. Dar nu uitați că aceste caracteristici CSS3 sunt încă foarte interesante și disponibile pentru utilizare astăzi. Sprijinul este mereu în creștere și semnalează o lume în care putem să ne îndepărtăm de la Javascript pentru efecte vizuale - ceea ce este un lucru minunat dacă mă întrebi.
Voi termina cu acest memento simplu:
"Conținutul și funcționalitatea dvs. au prioritate față de orice altceva. Dacă vă aflați prin utilizarea oricăror funcții CSS3, asigurați-vă că site-ul dvs. va funcționa la fel pentru fiecare utilizator fără ele. "
Dacă te-ai săturat să-ți tragi părul din cauza unor bug-uri confuze, verifică Envato Studio unde poți să ceri ajutor de la dezvoltatorii care au ales mana care iubește bug-uri și face corecții!
