Animazioni CSS: Migliora Il Tuo Sito Web Con Queste 17 Opzioni

Animazioni affascinanti che catturano il tuo sguardo mentre una pagina web si carica. Transizioni fluide che ti guidano senza sforzo attraverso i contenuti di un sito web. Esplosioni inaspettate di colore e movimento quando interagisci con i pulsanti di un’app.

Anche se sottili, questi elementi influenzano notevolmente la tua percezione di un marchio e la tua esperienza digitale complessiva. Quindi, cosa dà vita a questi dettagli coinvolgenti? Spesso, ciò è possibile grazie all’aiuto delle animazioni CSS.

In questa guida, ti aiuteremo a raggiungerlo con:

• Una guida a CSS e all’animazione CSS
• Motivi principali per cui dovresti provare le animazioni CSS
• I pochi ostacoli all’adozione delle animazioni CSS (con soluzioni)
• 17 animazioni CSS esemplari da usare nella tua app o sito web
• Come iniziare ad aggiungere CSS al tuo sito web

Conosci il CSS

CSS è l’abbreviazione di Cascading Style Sheets.

CSS è un linguaggio di codifica che determina l’aspetto e il comportamento degli elementi grafici e dei contenuti in un sito web o applicazione. CSS è utile per personalizzare colori e font, posizionare e spaziare gli elementi in una pagina e, naturalmente, creare animazioni. Esistono animazioni CSS “pure” realizzate soltanto con codice HTML (Hypertext Markup Language) e CSS, e animazioni CSS che incorporano altri tipi di codice (come JavaScript) o media esistenti (come i GIF).

CSS ha fatto la sua comparsa nei primi anni ’90 e da allora è evoluto da CSS1 a CSS2 a CSS3 — la versione attuale e ampiamente utilizzata. In questo articolo, seguiremo la prassi comune di usare il termine “CSS” quando ci riferiamo a questa ultima versione.

HTML è come le fondamenta e la struttura di una casa, senza le quali la casa non può esistere. Ma il CSS trasforma quella casa con vernice, rifiniture e decorazioni che conferiscono uno stile unico e funzionalità.

Blocchi Fondamentali Dell’Animazione CSS

Le animazioni CSS utilizzano il codice CSS per collegare varie proprietà e valori che fanno “muovere” gli elementi sullo schermo.

Le proprietà CSS sono gli elementi delle animazioni, come sfondo, raggio del bordo, font, margine, tipo di movimento (come rotazione o dissolvenza), ecc. I valori completano i dettagli intorno a queste proprietà di animazione definendo colore, allineamento, dimensione, durata, direzione, velocità, ecc.

Diamo un’occhiata agli elementi della popolare regola @keyframes, che definisce le transizioni CSS durante una sequenza di animazione, per un esempio di come proprietà e valori lavorino insieme:

• La proprietà animation-name indica il nome dell’animazione.
• La proprietà animation-duration definisce la durata di un’animazione. I valori sono tipicamente espressi in secondi (0s, 4s, ecc.).
• La proprietà animation-delay specifica un ritardo nell’avvio dell’animazione. Anche il suo valore è dato in secondi (-2s, 5s, ecc.).
• La proprietà animation-iteration-count indica il numero di volte che un’animazione deve essere eseguita. Il valore rappresenta quante volte desideri che l’animazione si ripeta; per esempio, infinite-alternate la farà continuare all’infinito.
• La proprietà animation-direction descrive come un’animazione deve essere riprodotta. I valori includono normal (in avanti), reverse, alternate, ecc.
• La proprietà animation-timing-function definisce la curva di velocità. I valori includono ease-in-out per un avvio e una conclusione dolci, cubic-bezier per creare una curva di aspetto complesso, ecc.
• La proprietà animation-fill-mode definisce l’aspetto di un elemento quando l’animazione non è in riproduzione. I valori includono forwards per mantenere i valori impostati dall’ultimo fotogramma chiave, ecc.

Ora uniamo il tutto! In questo esempio di W3Schools, che associa un’animazione (chiamata “example”) all’elemento <div>, puoi vedere che l’elemento è un quadrato di 100px e ha uno sfondo rosso. Quando l’animazione inizia, continuerà per 4 secondi mentre lo sfondo passa dal rosso al giallo:

/* Il codice dell'animazione */
@keyframes esempio {
from {background-color: red;}
to {background-color: yellow;}
}

/* L'elemento a cui applicare l'animazione */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(Nota: Questo è solo un esempio. Le animazioni Keyframe non sono l’unico modo per creare animazioni CSS e non sono compatibili con tutte le versioni dei browser — continua a leggere per ulteriori informazioni e consigli sulla compatibilità.)

3 Motivi Fantastici Per Implementare Le Animazioni CSS

Dal potenziare interazioni indimenticabili al garantire che avvengano alla velocità delle aspettative moderne, le animazioni CSS hanno moltissimo da aggiungere all’esperienza digitale — sia per te che per i tuoi fantastici clienti o visitatori.

Crea Una Storia Unica e un’Esperienza

I giorni in cui i siti web fungevano da cartelloni pubblicitari digitali sono ormai un lontano ricordo.

Nell’economia globale, i siti web e le app sono la tua migliore opportunità per raccontare la storia del tuo marchio.

Perché concentrarti sulla tua storia? Perché una grande storia distingue il tuo marchio, cattura l’attenzione del tuo pubblico ideale, crea connessioni durature e — forse ancora più importante — ispira azione.

E la tua storia è, in parte, costruita sugli elementi interattivi che includi nella tua esperienza utente.

Le animazioni CSS riguardano la creazione di esperienze uniche che reagiscono e si muovono con l’utente, costruendo rapporti e coinvolgimento con la storia del tuo marchio.

Rinnova E Mantieni Con Meno Tasti

CSS è un linguaggio di codifica organizzato e piuttosto conciso. Nel mondo dello sviluppo web, è ciò che si definisce “pulito”. I fogli di stile possono generalmente essere ridotti al minimo per progetti di app e siti web semplici.

Questo significa che quando è il momento di aggiornare il tuo progetto, fare manutenzione di routine, o semplicemente rinnovare il tuo look ed esperienza — dovrebbe essere abbastanza rapido individuare dove apportare la modifica, creare il tuo aggiornamento e applicarlo su tutta l’interfaccia. Non è necessario ricodificare e distribuire un gran numero di file HTML individuali.

Ottimizza La Tua Velocità

CSS è considerato “leggero” rispetto a JavaScript e altri linguaggi di programmazione, rendendolo uno strumento eccellente per aggiungere contenuti vivaci e coinvolgenti al tuo prodotto — senza aggiungere anche peso che rallenta il caricamento.

Inoltre, tende anche ad essere memorizzato agressivamente nella cache. Questi fattori insieme significano che le animazioni create con CSS dovrebbero essere veloci da visualizzare dopo il primo clic, così come nei caricamenti successivi del tuo sito web o app.

Come un fattore di classificazione importante per quanto riguarda i risultati di ricerca di Google, la velocità è qualcosa a cui tutte le aziende con una presenza online dovrebbero pensare.

Considerazioni Prima di Immergersi nelle Animazioni CSS

Stai entrando nella zona di rallentamento. Prima di lanciarti a capofitto nelle animazioni CSS, ci sono alcuni piccoli ostacoli di cui vogliamo assicurarci che tu sia a conoscenza e preparato a gestire.

Preoccupazioni Di Compatibilità

Hai mai notato come alcune funzionalità sembrano scomparire o intralciare quando interagisci con un sito web sul telefono — o rallentano notevolmente il tuo computer?

I diversi dispositivi (telefoni cellulari, smartwatch, tablet, computer, ecc.) e browser (Chrome, Safari, Firefox, ecc.) sono tutti costruiti utilizzando tecnologie diverse. Queste tecnologie significano che il modo in cui interagiscono con i linguaggi di codice può variare — e non è diverso nel caso delle animazioni CSS.

Se non apporti delle modifiche personalizzate, un effetto di animazione che appare incredibilmente cool su Firefox con il tuo laptop potrebbe sembrare o comportarsi in modo strano per qualcuno che lo visualizza usando Safari sul proprio telefono.

Il testing dell’assicurazione di qualità (QA) è fondamentale per garantire che le tue animazioni CSS siano compatibili in tutti i luoghi in cui gli utenti interagiscono con la tua presenza digitale.

Soluzione: Utilizza un validatore CSS e gli strumenti per sviluppatori del browser per aiutare a identificare problemi di compatibilità ed errori nella creazione del CSS. Coloro che sono particolarmente esperti di codice possono installare una libreria mixin di Sass come Bourbon per mantenere aggiornati e compatibili i prefissi del browser (webkit per Chrome e Safari, moz per Firefox, ecc.).

17 Animazioni CSS Dinamiche da Provare Oggi

Pronto a utilizzare animazioni CSS per creare esperienze digitali sorprendenti che attraggono e mantengono gli utenti? Pronto ad aumentare la velocità del sito, così importante, e a ridurre i tempi di manutenzione e di redesign?

Allora sei nel posto giusto! Abbiamo raccolto alcune fantastiche animazioni CSS per il tuo piacere visivo. Clicca su qualsiasi opzione che ti colpisce per ottenere il codice di cui hai bisogno, e poi puoi aggiungerlo al foglio di stile del tuo sito web. (Per tua informazione, i Pens pubblici su CodePen sono liberi di essere usati da chiunque per qualsiasi scopo, secondo i dettagli della loro licenza.)

Animazioni Di Caricamento

Le animazioni di caricamento potrebbero non essere la classe più emozionante di animazione CSS, ma sono fondamentali per l’esperienza dell’utente. I visitatori di app e siti web tendono ad avere più pazienza con un po’ di tempo di caricamento quando hai fornito un indicatore che qualcosa di grandioso sta per arrivare.

1. “Loader CSS con punti” di Aliaksei Peterson

Ormai, una linea pulsante di punti è universale per “Un attimo!” Proprio come il codice, questa opzione è chiara e concisa, rendendola adatta per una presenza online dal tono serio o dallo stile minimalista.

Vedi la Pen
Loader CSS con puntini di Aliaksei Peterson (@petersonby)
su CodePen.

2. “Spinner di Caricamento Semplici in HTML & SVG” di Stephen Delaney 

Un altro classico simbolo di caricamento — il rotatore. Questa animazione offre l’opzione di integrare un SVG, che sta per Scalable Vector Graphic, il quale può essere ridimensionato senza perdita di qualità.

Vedi la penna
Spinner di caricamento semplici in HTML & SVG di Stephen Delaney (@sdelaney)
su CodePen.

3. “Animazione di Caricamento” di Mohamed Yousef

Questo insieme di forme simili a lacrime che ruotano offre un’animazione meravigliosamente semplice in cui perdersi, rendendo un piccolo tempo di caricamento extra molto meno fastidioso. Cosa potresti desiderare di più?

Vedi la Pen
Animazione di Caricamento di Mohamed Yousef (@Freeps2)
su CodePen.

4. “Animazione Solo Css #02” di Hisami Kurita

Un’impressionante animazione in puro CSS che ricorda l’ingresso nel sito web di un ristorante o hotel di lusso. Cambia il colore e il nome per adattarlo al tuo marchio.

Vedi la Pen
Only Css Animation #02 di Hisami Kurita (@hisamikurita)
su CodePen.

5. “L’Animazione Luminosa – Animazione CSS Pura” di Maxime Rossignol

La schermata di caricamento più creativa che abbiamo visto, questa animazione offre molto da guardare mentre aspetti che il resto dei tuoi elementi digitali prendano vita.

Vedi la Penna
Il Caricatore Luminoso – Animazione CSS Pura di Maxime Rossignol (@Maxoor)
su CodePen.

Animazioni Del Contenuto

Cerchi un modo per assicurarti che gli utenti della tua app e del tuo sito web non perdano informazioni cruciali? Evidenziale con una di queste animazioni CSS.

6. “Animazione del Testo Che Cambia in CSS” di Coding Yaar

Aggiungi un tocco di stile ai titoli e ad altri testi importanti con questa animazione, completa di dettagli come movimenti di scorrimento, cambi di colore e altro ancora.

Vedi la penna
Animazione di Testo Modificabile CSS di Coding Yaar (@codingyaar)
su CodePen.

7. “Effetto di Rivelazione del Blocco CSS” di Abubaker Saeed

L’effetto “rivelatore” di questa animazione offre un altro modo interessante per attirare l’attenzione sugli elementi di contenuto importanti che desideri assicurarti che i visitatori non perdano.

Vedi la Pen
Effetto di Rivelazione del Blocco CSS di Abubaker Saeed (@AbubakerSaeed)
su CodePen.

8. “CSS Reveal Slider” di Adam Kuhn

Con molti font interessanti, pulsanti animati e una funzione di ribaltamento che rivela più informazioni — questa sembra un’ottima opzione per introdurre gli utenti a sezioni più lunghe di contenuti imperdibili come Domande frequenti, funzionalità, ecc.

Vedi la penna
CSS Reveal Slider di Adam Kuhn (@cobra_winfrey)
su CodePen.

9. “Scheda Informativa Animata” di Adam Kuhn

Dallo stesso creatore dell’animazione CSS precedente, questa opzione presenta un altro modo audace e creativo per guidare gli utenti attraverso gli elementi della tua storia di marca.

Vedi la Pen
Scheda Informativa Animata di Adam Kuhn (@cobra_winfrey)
su CodePen.

Animazioni Dei Pulsanti

I pulsanti sono spesso il mezzo per spingere gli utenti a compiere un’azione o ad approfondire i tuoi contenuti. Ispira l’interazione aggiungendo animazioni CSS ai pulsanti importanti.

10. “Effetto di Scorrimento al Passaggio del Mouse sul Pulsante CSS” di RazorX

Molte opzioni disponibili qui per aggiungere animazioni di riempimento di colore a pulsanti altrimenti semplici.

Vedi la Penna
Effetto di Scorrimento sul Pulsante CSS al Passaggio del Mouse di RazorX (@RazorXio)
su CodePen.

11. “Animazioni dei Pulsanti” di Alex Belmonte

Vuoi aggiungere un po’ di movimento a quei pulsanti? Aggiungi un effetto hover e azioni come rimbalzare, dondolare e altro ai tuoi pulsanti con questo CSS.

Vedi la Pen
Animazioni dei Pulsanti di Alex Belmonte (@AlexBelmonte)
su CodePen.

12. “Effetto hover del pulsante CSS” di Julia

Un tocco di colore minimale ma d’impatto aggiunge una sorpresa e piacere ai tuoi pulsanti.

Vedi il Pen
Effetto hover del bottone in CSS di Julia (@sfoxy)
su CodePen.

Animazioni Di Sfondo

Vuoi che gli sfondi di alcuni elementi del tuo sito web o app siano proprio abbastanza interessanti da attirare l’attenzione — senza mettere in ombra ciò che desideri che gli utenti leggano e facciano.

13. “Sfondo Animato Gradiente” di Mario Klingemann

Applica questo ciclo infinito di colori allo sfondo delle sezioni chiave del tuo sito web o app per aggiungere un tocco di movimento.

Vedi la penna
Sfondo Animato Gradiente di Mario Klingemann (@quasimondo)
su CodePen.

14. “Animazioni CSS con SVG” di Joyanna

Forme morbide e colorate con movimenti delicati creano uno sfondo distintivo per le sezioni più importanti del tuo contenuto.

Vedi il Pen
Animazioni CSS con SVGs di Joyanna (@joyanna)
su CodePen.

15. “Scorrimento parallasse semplice” di Ungmo Lee

Un’animazione di scorrimento parallasse consente sia al primo piano che allo sfondo di muoversi, ma a velocità diverse per creare l’illusione della profondità. Come puoi vedere dall’esempio, l’effetto parallasse può essere travolgente se non applicato con moderazione.

Vedi la penna
Simple parallax scroll di Ungmo Lee (@ungmo2)
su CodePen.

Animazioni Ovunque

Prova queste animazioni CSS per puro divertimento per aggiungere un po’ di *pepe* in vari punti dell’esperienza utente.

16. “Modello: Logo” di Alex Katz

Passa il mouse sul logo per vedere un leggero effetto di espansione. Questo movimento sottile può essere utilizzato su loghi così come su pulsanti, icone e altri componenti.

Vedi la penna
Template: Logo di Alex Katz (@katzkode)
su CodePen.

17. “Animazione Fluttuante – CSS” di Mario Duarte

Un delicato effetto fluttuante come questo è un altro tocco sorprendente e divertente che fa capire ai visitatori che ti prendi cura delle tue proprietà digitali così come della loro esperienza.

Vedi la penna
Animazione Fluttuante – CSS di Mario Duarte (@MarioDesigns)
su CodePen.

Come Aggiungere CSS Al Tuo Sito Web

Ognuna delle animazioni CSS sopra è accompagnata da HTML, CSS, e a volte altro codice che puoi incollare direttamente nel foglio di stile del tuo sito web e modificare come necessario per personalizzarlo.

Se hai un sito web costruito su misura dove gestisci il codice e non sei ancora familiare con il CSS, pensiamo che potrebbe esserti utile conoscere il linguaggio prima di provare ad implementare le animazioni sopra menzionate. Impara le basi della creazione di una linea di codice e poi immergiti nei migliori tutorial per sviluppare le tue competenze in CSS con la guida di DreamHost per imparare il CSS.

Noterai dagli esempi sopra che può essere necessario molto codice per creare un’animazione. Se ti senti a tuo agio con CSS e sei pronto per ottimizzare spazio e tempo, prendi in considerazione l’utilizzo di una libreria di animazioni CSS. Ogni libreria avrà istruzioni su come aggiungerla al tuo sito web, solitamente comporta l’aggiunta di un file sorgente o di un CDN al tuo markup. Una volta installata, puoi utilizzare la notazione specifica della libreria per aggiungere le tue animazioni.

Se stai usando un sito WordPress, la piattaforma offre una guida utile per modificare il CSS utilizzando l’Editor del Sito (una funzionalità beta disponibile su alcuni temi) o il Personalizzatore (disponibile nella maggior parte dei temi classici e alcuni temi di terze parti). All’interno di queste schermate di modifica è dove incollerai il codice dai nostri esempi di animazione CSS sopra.

Ma cosa succede se un sito web in grado di raccontare la storia del tuo brand è ancora solo un sogno? Allora abbiamo buone notizie, perché noi di DreamHost siamo specializzati nel realizzare i sogni di siti web. Con design web personalizzato, un costruttore di siti WordPress facile da usare, servizi professionali dai nostri esperti interni, e naturalmente robuste opzioni di hosting — DreamHost ti aiuterà a portare online il tuo sogno.