C’è stato un tempo (non molto tempo fa a dir il vero) in cui le grafiche animate all’interno dei siti web era bandite.
Nessun web designer si sognava di inserire animazioni ed effetti all’interno dei loro progetti, perché i clienti esigevano concretezza e adoravano lo stile minimal.
Anche oggi molti di loro non badano a fronzoli e spingono per ottenere “prodotti” stilosi sì, ma graficamente semplici e privi di inutili orpelli grafici.
“Eppur si muove”, verrebbe da dire.
Grazie alle animazioni CSS infatti, il movimento è tornato negli ultimi tempi sui siti web di piccole e grandi aziende.
Le animazioni CSS NON inficiano le prestazioni del tuo sito
Perché è successo? A cosa è dovuto questo improvviso “coming back”?
Molto lo si deve alla “potenza” e alla flessibilità dei fogli di stile: i CSS offrono la possibilità di creare piccoli movimenti grafici utilizzando poche stringhe di codice e quindi senza “appesantire” il sito e renderlo di fatto inutilizzabile.
Perché, ricordiamocelo sempre, la velocità di caricamento di una pagina web è uno dei parametri SEO fondamentali per garantire massima visibilità al tuo sito web.
Ecco quindi che le animazioni CSS rappresentano il modo migliore per “creare movimento” senza gravare sulle prestazioni del sito.
La regola d’oro è non esagerare
Ma c’è anche un’altra ragione.
Il movimento cattura lo sguardo, desta curiosità, richiede attenzione. Questo significa aver più chance di coinvolgere l’utente e trannerlo all’interno del tuo sito web, magari con un call-to-action forte e incisiva.
La regola d’oro per chi vuole realizzare animazioni CSS è una e una sola: non esagerare.
Basta un piccolo movimento per generare un grande impatto.
Lo puoi notare anche negli esempi che abbiamo raccolto in questo articolo che oltretutto sono stati sviluppati tenendo conto dei 12 classici principi di animazione della Disney.
Cliccando sul link che trovi sotto ciascuna animazione CSS puoi vedere e scaricare il codice.
Che te ne pare?
