Share
L'animazione CSS3 è dannatamente interessante. Ci consente di dare vita hardware accelerata ai nostri siti web precedentemente noiosi. Tuttavia, ci sono alcuni trabocchetti e pratiche di cui dovresti essere a conoscenza - scaviamo dentro.
Il supporto del browser per l'animazione CSS3 si sta intensificando - Mozilla Firefox è entrato in WebKit in pieno supporto e Internet Explorer 10 e Opera 12 hanno promesso il supporto futuro. Ciò significa che possiamo iniziare a usarli senza paura oggi. Tuttavia, questo supporto prospero non viene senza i suoi problemi.
Essendo una proprietà nata e cresciuta di Webkit, ci si aspetterebbe che l'animazione CSS abbia pieno supporto su tutti i browser Webkit. Sfortunatamente, non è così semplice. Il browser integrato nei dispositivi Android fa supportare le animazioni - in una certa misura. Il problema è che supporterà solo animazioni con una singola proprietà mutevole.
Quindi diciamo che volevamo lavorare con il mio framework di animazioni, Animate.css, per creare un sito fantastico. La maggior parte delle animazioni come bounceInLeft funzionerà alla grande sugli ultimi Chrome, Safari, Firefox e iOS Safari. Ma su un dispositivo Android, l'utente non vedrà un singolo elemento animato. L'animazione viene eseguita, ma l'elemento scompare non appena finito.
Questo strano capriccio significa che le sole animazioni che possiamo eseguire su dispositivi Android sono di proprietà singola, come fadeIn e bounce. Sfortunatamente, non è chiaro se Android 4.0 fornirà un supporto migliore, si spera che lo farà.
Fino a quando non vedremo un maggiore supporto da questi dispositivi Android, la soluzione migliore è fornire fallback JavaScript o animazioni meno complesse. Ma come puoi dire al tuo sito di non usare le tue fantastiche animazioni su questi dispositivi? L'uso di Modernizr non sarà d'aiuto in questo caso: rileverà che il browser supporta le animazioni. Fortunatamente, possiamo controllare l'agente utente e pubblicare un foglio di stile alternativo o uno script. In PHP, è facile come questo:
$ ua = strtolower ($ _ SERVER ['HTTP_USER_AGENT']); if (stripos ($ ua, 'android')! == false) // && stripos ($ ua, 'mobile')! == false) $ css = "droid-style.css"; else $ css = "style.css";
Quel frammento verrà caricato Droid-style.css su dispositivi Android, nel senso che possiamo mantenere le nostre animazioni fantasiose per i browser che possono utilizzarle. Eccellente!
I dispositivi iOS come iPhone e iPad hanno un grande supporto per le animazioni CSS3, con accelerazione hardware completa - ma solo se si tratta di una trasformazione 3D. Se l'animazione non comporta una trasformazione 3D, verrà accelerata esclusivamente dal software, che può risultare in animazioni laggose.
Per ottenere l'accelerazione hardware completa sulle animazioni, è necessario attivare il motore di rendering 3D. È facile come aggiungere questa regola al tuo CSS:
.container -webkit-transform: translateZ (0);
Grande! Ma perché non applicare questa regola al corpo? Bene, per qualche ragione, l'attivazione del motore 3D gioca un po 'con il layout della pagina. Gli elementi fissi o posizionati in modo assoluto si spostano leggermente con questo applicato al corpo.
Come con tutte le cose nel mondo CSS3, questo trucco intelligente ha un costo. Non un forte, ma comunque un costo. Dai un'occhiata a questo confronto scientifico:
Ci vuole un occhio acuto per vederlo, ma l'attivazione del motore di rendering 3D rende l'antialiasing del testo in scala di grigi - questo si traduce in un testo leggermente più nitido, ed è particolarmente evidente su dimensioni di testo estremamente piccole o estremamente grandi. Come ho detto, non è un grosso problema, ma è ancora un bug. Aggiunta -webkit-font-smoothing: antialiased; può aiutare a ridurre leggermente il problema sui browser Webkit.
Immaginiamo che sia necessario spostare un elemento da un punto a un altro, senza influire sul layout della pagina. tradurre è il tuo migliore amico qui - la proprietà translate, come definito dal W3C:
... non influenza il flusso del contenuto che circonda l'elemento trasformato. Tuttavia, il valore dell'area di overflow tiene conto degli elementi trasformati.
Guarda quello? Non influisce sul flusso del contenuto circostante. Ma ciò fa influenzare l'overflow del documento. Ciò significa che se spostate un elemento fuori dalla pagina (come nel caso di alcune animazioni su Animate.css), causerà scrollbar.
I browser trattano questo comportamento in modo un po 'diverso tra loro. Safari e Chrome creeranno barre di scorrimento, ma una volta completata la trasformazione e l'opacità dell'elemento viene azzerata, rimuoverà le barre di scorrimento, come se l'elemento fosse stato rimosso. Firefox, d'altra parte, crea barre di scorrimento persistenti che rimarranno fino a quando l'elemento viene rimosso dal documento o impostato su display: nessuno. Il modo migliore per lavorare con queste trasformazioni è usare una piccola magia Javascript. Se conosci la lunghezza dell'animazione, dovresti rimuovere l'elemento dal DOM una volta terminata l'animazione. In alternativa, puoi guardare quando l'animazione è completa con qualche javascript intelligente:
Accentsconagua
var element = document.getElementById ("# box"); element.addEventListener ("webkitAnimationEnd", function () this.style.webkitAnimationName = "";, false); document.getElementById ("# button"). onclick = function () element.style.webkitAnimationName = "shake"; // probabilmente vorrai evitare Default qui. ; Questo piccolo frammento proviene effettivamente da un thread Overflow dello stack. E 'una buona cosa, quindi segnalalo!
Se stai scrivendo la tua animazione CSS, potresti notare qualcosa di strano su Safari, Chrome e dispositivi iOS. Appena prima dell'esecuzione dell'animazione, l'elemento animato in questione lampeggerà dentro e fuori dalla visibilità appena prima dell'inizio.
La ragione di questo fenomeno non è chiara, ma la soluzione è piuttosto semplice. Semplicemente aggiungendo il -webkit-backface-visibility: nascosto; regola per il tuo CSS dovrebbe aiutare a prevenire il problema. Applicalo al contenitore dell'elemento, in questo modo:
.container -webkit-backface-visibility: hidden;
Si riduce a un altro problema di accelerazione hardware: l'utilizzo di questa proprietà fa semplicemente scalpore sull'accelerazione. Potresti anche usare cose come -prospettiva del webkit: 1000; o altre proprietà 3D.
Ecco un altro paio di sfortunate verità con animazioni e transizioni CSS. Non è possibile utilizzare animazioni o transizioni su pseudo elementi. Questo fatto è in qualche modo poco documentato sul web, ma è importante. Diciamo, per esempio, che tu volevi un :dopo lo pseudo elemento sfuma in visibilità quando passi il mouse sopra il suo genitore. Sfortunatamente, scatterà tra gli stati invece di passare con grazia. Per quanto ne sappiamo, questo è un comportamento insolito: ci sono segnalazioni di bug archiviate per Chrome e Webkit - e Firefox supporta effettivamente queste transizioni. Puoi tenere il passo con lo stato attuale del supporto per transizioni e animazioni su pseudo elementi su CSS-tricks.
Tuttavia, vale la pena notare che se si applicano transizioni o animazioni a un elemento che contiene pseudo elementi, tali transizioni verranno trasferite agli pseudo elementi.
E ora per un altro calcio nei denti. Transizioni e animazioni ripristinano lo z-index di un oggetto. Se hai degli oggetti ben impilati che vuoi animare, avranno il loro ordine di impilamento ripristinato. È una sfortunata verità e, di nuovo, non quella di cui molte persone parlano.
Potrei essere in acqua piuttosto profonda qui, ma puoi rendere le tue animazioni molto più realistiche giocando con le funzioni di cronometraggio. Se lasci le funzioni di temporizzazione predefinite per le animazioni (facilità), puoi ottenere alcuni effetti piuttosto carini. Tuttavia, se stai cercando di ricreare un particolare pattern di movimento nei CSS, è importante imparare le differenze tra le diverse funzioni di temporizzazione. Prendiamo l'animazione 'cerniera' da Animate.css come esempio.
L'idea alla base di questa animazione era quella di far cadere l'elemento dalla sua posizione attuale, oscillare da un singolo angolo per un po 'e poi rilasciarlo completamente, come un segno spezzato. Ecco il trucco: l'animazione richiederà una varietà di funzioni temporali per renderla realistica. Pensa a questa mozione nella vita reale; quando il segno cade e inizia a oscillare, inizia lentamente, quindi aumenta la velocità, quindi rallenta al massimo. Tuttavia, quando cade completamente, dovrebbe cadere abbastanza improvvisamente e accelerare mentre cade. Sembra che abbiamo bisogno di entrambi facilità in-out e facilità in.
In realtà è piuttosto facile. All'interno dei tuoi fotogrammi chiave, puoi dichiarare le diverse funzioni di temporizzazione, come questa:
@keyframes hinge 0% animazione-timing-function: easy-in-out; transform: ruotare (-120 gradi); trasformazione-origine: in alto a sinistra; 25% animation-timing-function: easy-in-out; transform: ruotare (70 gradi); trasformazione-origine: in alto a sinistra; 50% animation-timing-function: easy-in-out; transform: ruotare (-120 gradi); trasformazione-origine: in alto a sinistra; 100% animation-timing-function: ease-in; transform: ruotare (0deg) translateY (200%);
Usando una varietà di funzioni temporali, piuttosto che solo quella predefinita, abbiamo un maggiore controllo su come l'animazione suona. Se esegui l'animazione della cerniera senza le funzioni di cronometraggio personalizzate, puoi vedere quanto appare strana. quando si scrivono le animazioni, confrontarle con istanze di vita reale dello stesso movimento. Rallenta nella tua mente e pensa a come ciascuno di essi è cronometrato.
Questa potrebbe essere la cosa più importante che togli, quindi ascolta. Credo fermamente che le animazioni CSS siano lì da usare con parsimonia per l'interazione aggiunta e nient'altro. Persone abili come Anthony Calzadilla stanno facendo cose pazzesche con animazioni CSS, ma secondo me, nel mondo reale queste animazioni dovrebbero essere poche e distanti.
Prendi questa pagina come esempio. Tutto qui (tranne la gif animata obbligatoria) è animato tramite CSS. È un esempio estremo, ma puoi capire perché sono preoccupato per l'uso eccessivo di queste cose.
Lo stesso vale per tutte le proprietà CSS3. Transizioni, ombre e gradienti dovrebbero essere usati con sottigliezza. Penso che la pagina di destinazione di Owlr sia un buon esempio. L'invio di un'e-mail non valida o di un modulo vuoto creerà un errore di convalida con un paio di animazioni non essenziali per attirare l'attenzione.
Nel suo libro CSS3 For Web Designers, (che è una buona lettura) Dan Cederholm parla molto del "livello dell'esperienza". Sottolinea il fatto che tutti i valori CSS3 dimostrati nel suo libro sono solo per un ulteriore livello di esperienza - gli effetti aggiunti non sono essenziali e dovrebbero sempre degradarsi con garbo nei browser che non li supportano completamente. Ricorda questa regola e diventerai più potente di quanto tu possa immaginare. O qualcosa di simile.
La maggior parte dei computer ha una potenza più che sufficiente per eseguire animazioni e transizioni CSS3 senza problemi - tuttavia, più si tenta di pompare nel CSS, più influirà sulle prestazioni.
Prendiamo ad esempio una semplice animazione che muove a div da sinistra a destra infinitamente. Roba semplice Rendiamo questa casella un po 'più interessante - dargli un'ombra di casella, un'ombra di testo, forse un gradiente ... tutte queste regole influenzeranno le prestazioni della pagina. Se hai dato il tuo div un'ombra di scatola con un raggio di sfocatura ridicolo (sto parlando di centinaia qui), noterete un calo grave delle prestazioni. Il browser sta lavorando così duramente nel tentativo di capire come deve essere eseguito il rendering dei pixel che compongono l'ombra della casella da cui inizia l'hogging delle risorse necessarie per l'animazione, o anche il resto della pagina: operazioni semplici come lo scorrimento possono diventare dolorosamente lente. Mantieni i miglioramenti visivi al minimo, in particolare le ombre.
L'accelerazione hardware aiuta a prevenire questo problema, ma è ancora un problema di cui essere a conoscenza. Non tutti i tuoi utenti avranno il lusso dell'accelerazione hardware e la grafica con software renderà il loro pedaggio sul computer.
Si spera che tu sia più consapevole di alcune delle insidie dell'animazione CSS3 e di tutte le sue stranezze da browser multiplo rispetto a prima. Ma non dimenticare che queste funzionalità CSS3 sono ancora molto interessanti e disponibili per l'uso oggi. Il supporto è in continua crescita e segnala un mondo in cui possiamo spostarci da Javascript per effetti visivi - il che è una grande cosa se me lo chiedi.
Concludo con questo semplice promemoria:
"I tuoi contenuti e funzionalità hanno la priorità su tutto il resto. Se ti ritrovi a utilizzare le funzionalità CSS3, assicurati che il tuo sito funzioni allo stesso modo per tutti gli utenti senza di loro. "
Se sei stanco di strapparti i capelli a causa di bug confusi, dai un'occhiata a Envato Studio dove puoi chiedere aiuto a sviluppatori selezionati a mano che amano schiacciare i bug e fare correzioni!
