Nella mia lista di articoli da toeletta che farò, un giorno o l'altro? è l'idea di creare una libreria precostruita di utili animazioni CSS. La cattiva notizia è che probabilmente non riuscirò mai a farlo. La buona notizia è che lo sviluppatore Dan Eden mi ha battuto.
Oggi daremo un'occhiata a Animate.css, una fantastica e gratuita raccolta di animazioni CSS che puoi applicare ai tuoi progetti senza sforzo. È uno scherzo giocare così segui e unisciti al divertimento.
Cos'è Animate.css?
Non c'è niente di rivoluzionario o speciale nel modo in cui è realizzato Animate.css, se sai come usare i CSS, allora sai come usarlo. È semplicemente un insieme di animazioni di fotogrammi chiave predefinite raggruppate in alcune classi. Se si desidera utilizzare una delle animazioni, si applica la classe. Questo è tutto!
Se queste erano tutte transizioni estremamente semplici, questa utilità potrebbe non valere il tuo tempo. Tuttavia, queste sono animazioni complesse e costruite con cura che sono completamente personalizzabili. Se stai cercando di utilizzare i fotogrammi chiave a qualsiasi livello, Animate.css potrebbe farti risparmiare molto tempo.
Non voglio lezioni maleodoranti
A questo punto, la polizia minima sul markup è pronta a lanciarsi in un arresto. Chi vuole ingombrare il proprio codice HTML con un sacco di classi extra? Per gli scopi di questo tutorial ci atteniamo a questo metodo, ma se non approvi, è abbastanza facile copiare e incollare semplicemente il codice per un'animazione in un hook semantico.
Inoltre, alla fine di questo pezzo ti mostrerò un percorso alternativo che ti permetterà di cancellare il markup extra attraverso l'uso del nostro buon amico Sass @extend.
Creare una costruzione personalizzata
Hai due opzioni per scaricare Animate.css. Puoi prendere l'intero oggetto da Github (utile per sperimentare) o creare un download personalizzato che includa solo gli effetti necessari per il progetto specifico su cui stai lavorando (valido per l'uso effettivo).
Un consiglio accurato nella pagina di creazione personalizzata, prova a passare il mouse su ogni etichetta di animazione. Ti mostrerà esattamente cosa fa l'animazione in modo che tu possa decidere se includerla o meno.
Il download
Se si sceglie di scaricare tutto come ho fatto, si ottiene un unico file CSS contenente tutte le classi di animazione e una cartella piena di singoli file CSS, ciascuno contenente un'animazione.
È possibile selezionare facilmente un file CSS specifico se si desidera solo applicare una singola animazione, ma si tenga presente che non si regge da solo. Come vedremo, c'è un? Animato? classe nel grande file che ti servirà per far funzionare tutto.
Costruire una demo rapida
Ora che abbiamo scaricato i nostri file, è tempo di capire come usare questo cattivo ragazzo. Avremo bisogno di qualcosa per testarlo, quindi costruiamo una galleria di immagini veloce. Non devi fare di tutto, solo lanciare alcune immagini in un div, modellarle leggermente e farle galleggiare a sinistra.
HTML
Non andare davvero a dadi
Il consiglio di cui sopra è principalmente a scopo di test. Quando calci le gomme di Animate.css, incoraggiati a scavare e provare tutto. Tuttavia, se hai intenzione di implementarlo in un vero flusso di lavoro, c'è molto da tenere a mente.
Innanzitutto, pensa al supporto del browser. Le animazioni dei fotogrammi chiave sono finalmente supportate in IE 10, ma nulla sotto. Tuttavia, secondo CanIUse, funzionano bene su quasi tutto il resto: Safari, Chrome, Firefox, Opera e persino alcuni browser mobili come quelli per Android e iOS. Data la mancanza di supporto IE, mantieni rigorosamente le tue animazioni nella categoria "eye candy" e non fare affidamento su di esse per strutturare le tue interazioni o lascerai molti utenti fuori.
In seguito, considera il fatto che le animazioni dei fotogrammi chiave possono essere azioni piuttosto pesanti che davvero rovinano l'esperienza dell'utente se si va troppo lontano. Usa un po 'di moderazione ed esegui molti test per vedere come si comporta la pagina su piattaforme diverse.
Mescolandolo con Sass
Guardando sopra Animate.css mi trovo a voler riscrivere l'intera cosa in Sass. Non posso fare a meno di pensare a quanto sarebbe molto più conciso e facilmente implementabile usare la magia dei preprocessori. L'intera libreria potrebbe essere costruita in modo simile a Compass, rendendo l'implementazione di un effetto facile come chiamare un mixin.
Nel frattempo, dato che Sass si integra perfettamente con i semplici CSS, potresti comunque darti una bella spinta di funzionalità senza riscrivere nulla. La chiave qui è applicare le animazioni usando @extend, che elimina la necessità di implementare classi extra nel markup. Considera quanto segue:
Qui ho creato un paio di semplici classi di pulsanti e ho sfruttato la potenza di Sass per rimbalzarli su hover. Il risultato sarà ASCIUTTO CSS vuoto di ripetizione. Penso che Sass sia fantastico per cose come questa, mostra davvero l'utilità dei preprocessori.
Cosa pensi?
Mi sono divertito molto a giocare con Animate.css. Non sono sicuro di quanto lo userò in natura, ma sono molto grato che Dan Eden abbia trovato il tempo per metterlo insieme e offrirlo gratuitamente.
Lascia un commento qui sotto e facci sapere cosa ne pensi.Sei sorpreso di quanto lontano CSS si sia avventurato nel territorio delle cose che usavamo per usare jQuery? È una buona idea o dovremmo lasciare qualcosa di simile a JavaScript? Mi piacerebbe sentire le tue opinioni.