Introduzione alle animazioni con CSS

Le animazioni web giocano un ruolo cruciale nell'interfaccia utente moderna. Con CSS, abbiamo a disposizione un potente strumento per creare esperienze utente coinvolgenti.

Dalla semplice transizione di un bottone all'animazione complessa di un'intera pagina, le animazioni CSS possono trasformare un sito statico in un'esperienza interattiva e dinamica. Sono utilizzate per attirare l'attenzione su elementi specifici, guidare gli utenti attraverso flussi di interazione e migliorare l'estetica generale del sito.

La proprietà animation e le sue sotto proprietà

La proprietà animation è un insieme di otto sotto proprietà che controllano vari aspetti delle animazioni in CSS:

• animation-name: Definisce il nome dell'animazione, che corrisponde al nome definito nei keyframes.
• animation-duration: Imposta la durata totale dell'animazione.
• animation-timing-function: Controlla la velocità dell'animazione in vari punti, usando funzioni come ease, linear, ease-in, ease-out, e ease-in-out.
• animation-delay: Specifica un ritardo prima che l'animazione inizi.
• animation-iteration-count: Determina quante volte l'animazione si ripete.
• animation-direction: Indica se l'animazione deve procedere all'indietro, in avanti, o alternare le due direzioni.
• animation-fill-mode: Decide come lo stile dell'elemento deve essere applicato prima dell'inizio e dopo la fine dell'animazione.
• animation-play-state: Permette di mettere in pausa e riprendere l'animazione.

Come definire una sequenza di animazione usando i keyframes

I keyframes in CSS sono fondamentali per creare animazioni personalizzate. Con @keyframes, possiamo definire lo stile di un elemento in diversi momenti dell'animazione.

Ciò permette un controllo dettagliato del comportamento dell'animazione, consentendo transizioni complesse e movimenti precisi. Ogni keyframe specifica lo stile dell'elemento in un certo punto percentuale dell'animazione, da 0% (inizio) a 100% (fine).

1@keyframes esempio {
2  0% { opacity: 0; }
3  50% { opacity: 0.5; }
4  100% { opacity: 1; }
5}

La shorthand animation

La shorthand animation rende più semplice e pulito scrivere le animazioni, combinando tutte le sotto proprietà in un'unica dichiarazione. Questo non solo riduce la quantità di codice, ma rende anche il foglio di stile più leggibile e facile da manutenere.

1div {
2  animation: esempio 2s ease-in-out 1s infinite alternate;
3}

Impostare animazioni multiple

CSS permette di applicare più animazioni simultaneamente a un singolo elemento. Questo è particolarmente utile quando si desidera combinare diverse animazioni, come ruotare un elemento mentre cambia colore. Si possono definire multiple animazioni elencandole separatamente, separate da una virgola.

1div {
2  animation: esempio1 2s, esempio2 3s infinite;
3}

Esempi di animazione fatte con CSS

Di seguito vediamo qualche semplice esempio di animazione fatte in CSS.

Animazioni fade-in in CSS

Fade-in è un’animazione che aumenta gradualmente l'opacità di un elemento, facendolo apparire fluidamente.

1@keyframes fadeIn {
2  from { opacity: 0; }
3  to { opacity: 1; }
4}
5
6.elemento-fade-in {
7  animation: fadeIn 2s ease-in;
8}

Spiegazione

• @keyframes fadeIn definisce l'animazione.
• from e to sono i keyframes che indicano l'inizio e la fine dell'animazione.
• opacity: 0 e opacity: 1 sono gli stati di opacità iniziale e finale.
• .elemento-fade-in applica l'animazione all'elemento con una durata di 2 secondi e una funzione di timing ease-in.

Animazioni slide in CSS

Un'altra animazione comune è lo "slide", dove un elemento si muove da un punto di partenza a un punto di arrivo.

1
2@keyframes slide {
3  from { transform: translateX(0); }
4  to { transform: translateX(100px); }
5}
6
7.elemento-slide {
8  animation: slide 3s ease-out;
9}

Spiegazione:

• translateX(0) e translateX(100px) definiscono la posizione iniziale e finale dell'elemento sull'asse X.
• La durata dell'animazione è impostata su 3 secondi con una funzione di timing ease-out.

Animare la rotazione in CSS

L'animazione "rotate" fa ruotare un elemento attorno al suo centro.

1@keyframes rotate {
2  from { transform: rotate(0deg); }
3  to { transform: rotate(360deg); }
4}
5
6.elemento-rotate {
7  animation: rotate 5s linear infinite;
8}

Spiegazione

• rotate(0deg) e rotate(360deg) indicano la rotazione iniziale e finale.
• L'animazione ha una durata di 5 secondi, con una progressione lineare (linear) e si ripete all'infinito (infinite).

Cose da tenere a mente sull'accessibilità delle animazioni

L'accessibilità delle animazioni è un aspetto cruciale. Le animazioni possono causare problemi a utenti con disturbi visivi o cognitivi, come l'epilessia fotosensibile o il disturbo da deficit di attenzione e iperattività (ADHD). Ecco alcune linee guida per mantenere le animazioni accessibili:

• Evitare animazioni che lampeggiano a frequenze elevate.
• Fornire opzioni per ridurre o eliminare le animazioni, possibilmente attraverso un'impostazione accessibile dall'utente.
• Assicurarsi che le informazioni non siano veicolate esclusivamente attraverso animazioni.

Le animazioni CSS sono uno strumento versatile che, se usato con attenzione, può migliorare significativamente l'esperienza dell'utente sul web. Tuttavia, è fondamentale considerare l'accessibilità e l'usabilità durante la loro implementazione.