Prerequisiti: selettori, colori, dimensioni e normale flusso degli elementi.
Effetti e interazione
CSS permette di cambiare opacità, forma visiva e presentazione degli elementi, e di rendere graduali i passaggi tra stati. Gli effetti devono aiutare a riconoscere un elemento o un cambiamento, mantenendo leggibili i contenuti.
Gli stati interattivi
| Pseudoclasse | Quando si applica |
|---|---|
:hover | Quando un puntatore si trova sopra l’elemento. Il comportamento varia sui dispositivi touch. |
:focus | Quando l’elemento ha il focus. |
:focus-visible | Quando l’elemento ha il focus e il browser ritiene opportuno mostrarne un indicatore, tipicamente nella navigazione da tastiera. |
:active | Durante l’attivazione dell’elemento, per esempio mentre viene premuto un pulsante. |
Le pseudoclassi fanno parte del selettore, non sono proprietà CSS. Nei nostri esempi i pulsanti sono controlli HTML reali e possono ricevere il focus: servono soltanto a osservare gli effetti e non eseguono un’azione.
1. Trasparenza, visibilità e puntatore
Queste proprietà modificano la presentazione o il comportamento del puntatore. Non attribuiscono automaticamente funzioni agli elementi HTML.
| Proprietà o valore | Descrizione | Esempio HTML e CSS | Risultato |
|---|---|---|---|
opacity | Imposta l’opacità dell’intero elemento, compresi testo, bordo e discendenti. Zero è trasparente, uno è completamente opaco. | HTML | L’intero riquadro è semitrasparente e lascia vedere il fondo giallo. |
Colore con trasparenza | Un colore rgba semitrasparente applicato allo sfondo modifica soltanto quello sfondo, senza rendere trasparente il testo. | HTML | Lo sfondo è semitrasparente; testo e bordo mantengono la propria opacità. Rgba è una notazione di colore, non una proprietà. |
visibility | Con hidden nasconde l’elemento, lasciando normalmente il suo spazio nel layout. Non equivale a display: none. | HTML | Il riquadro non è visibile, ma la sua posizione nel layout rimane riservata. |
cursor | Imposta l’aspetto del puntatore quando si trova sull’elemento. Pointer mostra il puntatore tipico dei collegamenti. | HTML | Passando sopra il pulsante il puntatore cambia. Il pulsante è dimostrativo e non esegue un’azione. |
pointer-events | Con none esclude l’elemento come bersaglio diretto degli eventi del puntatore. Non è un sostituto dell’attributo disabled. | HTML | Il pulsante non è un bersaglio diretto del puntatore, ma può ancora ricevere focus tramite tastiera. Per disabilitare un vero pulsante usa disabled. |
2. Trasformazioni
Transform modifica la rappresentazione dell’elemento senza ridisporre normalmente gli elementi vicini. Il suo spazio originale nel flusso resta quello precedente alla trasformazione.
| Proprietà o valore | Descrizione | Esempio HTML e CSS | Risultato |
|---|---|---|---|
transform: translate() | Sposta l’elemento lungo gli assi orizzontale e verticale. Percentuali comuni come translateX(50%) dipendono dalla dimensione del riquadro trasformato. | HTML | Il riquadro è spostato di 20 pixel a destra e 15 in basso. |
transform: rotate() | Ruota l’elemento. Deg indica gradi; nella scrittura da sinistra a destra una rotazione positiva appare in senso orario. | HTML | Il riquadro è inclinato di 8 gradi intorno alla propria origine di trasformazione. |
transform: scale() | Ridimensiona visivamente l’elemento. Un fattore maggiore di uno ingrandisce, un fattore compreso tra zero e uno riduce. | HTML | Il riquadro appare all’80% della sua dimensione originaria. Lo spazio riservato nel layout non viene ridotto allo stesso modo. |
transform-origin | Definisce il punto intorno al quale avviene la trasformazione. Il riferimento iniziale abituale per un elemento HTML è il centro. | HTML | La rotazione avviene intorno all’angolo superiore sinistro. |
Trasformazioni combinate | Più funzioni si scrivono nello stesso valore. L’ordine conta: cambiare l’ordine può cambiare il risultato. | HTML | Il riquadro è spostato, ruotato e ridotto. Translate, rotate e scale sono funzioni del valore transform. |
3. Transizioni tra stati
Una transizione rende graduale il cambiamento di una proprietà animabile. Occorrono un valore iniziale e uno stato che lo modifichi. Negli esempi passa sul pulsante o raggiungilo con Tab.
| Proprietà o valore | Descrizione | Esempio HTML e CSS | Risultato |
|---|---|---|---|
transition | Proprietà abbreviata che può indicare proprietà, durata, andamento e ritardo. Qui la transizione riguarda il colore dello sfondo. | HTML | Il colore cambia gradualmente in 0,4 secondi e torna indietro quando lo stato termina. |
transition-property | Indica le proprietà coinvolte. Se sono più di una si separano con virgole. È spesso più chiaro elencarle che usare all. | HTML | Sfondo e spostamento cambiano gradualmente. |
transition-duration | Imposta la durata del cambiamento, in secondi o millisecondi. Il valore iniziale è zero: il cambiamento è immediato. | HTML | Il cambiamento di colore dura 800 millisecondi, cioè 0,8 secondi. |
transition-timing-function | Definisce come varia la progressione nel tempo. Valori comuni: ease, linear, ease-in, ease-out e ease-in-out. | HTML | Il movimento parte lentamente, accelera e rallenta alla fine. |
transition-delay | Imposta un ritardo prima dell’avvio. Qui il ritardo è positivo; sono ammessi anche valori negativi con un significato diverso. | HTML | Il colore comincia a cambiare dopo 0,4 secondi. |
Dove scrivere la transizione
Scrivi transition sulla regola di base quando vuoi un passaggio graduale sia all’ingresso sia all’uscita dallo stato. Una transizione scritta soltanto nella regola hover può produrre un ritorno immediato quando il puntatore esce.
Il passaggio deve riguardare proprietà e valori interpolabili. Colori, opacità e molte trasformazioni sono esempi comuni. Valori discreti, come display: none, richiedono meccanismi specifici e non producono una dissolvenza con una normale transizione.
4. Animazioni CSS
Una transizione collega due stati. Un’animazione può definire più tappe e partire senza hover o focus. Le tappe si descrivono con la regola @keyframes; le proprietà animation collegano la sequenza all’elemento.
| Proprietà | Descrizione | Esempio |
|---|---|---|
| animation-name | Nome della sequenza definita con @keyframes. | animation-name: ingresso; |
| animation-duration | Durata di un ciclo. Per il normale effetto temporale deve essere maggiore di zero. | animation-duration: 0.8s; |
| animation-timing-function | Andamento della progressione. | animation-timing-function: ease-out; |
| animation-delay | Ritardo prima dell’avvio. | animation-delay: 0.3s; |
| animation-iteration-count | Numero di ripetizioni; infinite ripete continuamente. | animation-iteration-count: 2; |
| animation-direction | Direzione della sequenza. Alternate inverte il verso nei cicli alterni. | animation-direction: alternate; |
| animation-fill-mode | Controlla se i valori della sequenza si applicano prima o dopo il periodo attivo. Forwards conserva i valori dell’ultima tappa pertinente, senza modificare la regola di base. | animation-fill-mode: forwards; |
| animation-play-state | Permette di mettere in pausa o riprendere. | animation-play-state: paused; |
| animation | Proprietà abbreviata per combinare le impostazioni principali. | animation: ingresso 0.8s ease-out both; |
Nell’esempio seguente la sequenza ha tre tappe. Parte quando l’anteprima viene caricata, termina dopo due secondi e mantiene lo stato finale. Per osservarla nuovamente ricarica la pagina della lezione.
HTML
<div class="scheda">Una breve animazione di ingresso.</div>CSS
.scheda {
margin: 25px;
padding: 20px;
border: 2px solid #17365d;
border-radius: 10px;
background-color: #dceeff;
animation: ingresso 2s ease-out both;
}
@keyframes ingresso {
0% {
opacity: 0;
transform: translateY(20px);
}
60% {
opacity: 1;
transform: translateY(-4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.scheda {
animation: none;
}
}Risultato
Le percentuali indicano le tappe temporali del ciclo. Anche from e to possono indicare, rispettivamente, 0% e 100%. La media query finale disattiva il movimento quando l’utente ha richiesto animazioni ridotte.
5. Esempio completo: un pulsante con più stati
Il pulsante cambia sfondo e ombra al passaggio del puntatore o al focus visibile. Durante la pressione si sposta leggermente verso il basso. Il contorno del focus rimane ben riconoscibile.
HTML
<button type="button" class="azione">Pulsante dimostrativo</button>CSS
.azione {
margin: 25px;
padding: 14px 20px;
border: 2px solid #17365d;
border-radius: 8px;
background-color: #dceeff;
color: #17365d;
cursor: pointer;
transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.azione:hover,
.azione:focus-visible {
background-color: #fff0d1;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.azione:focus-visible {
outline: 3px solid #b76b00;
outline-offset: 4px;
}
.azione:active {
transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
.azione {
transition: none;
}
.azione:active {
transform: none;
}
}Risultato
Altri effetti: filter
Filter applica effetti come sfocatura e scala di grigi alla rappresentazione dell’elemento, compresi i suoi contenuti. Per iniziare è preferibile provarlo su immagini anziché su testi da leggere.
img {
filter: grayscale(100%);
}
img:hover {
filter: grayscale(0%);
}Altre funzioni includono blur(2px), brightness(1.2) e contrast(1.2). Un effetto non crea automaticamente una transizione: per renderlo graduale occorre, per esempio, transition: filter 0.3s sulla regola di base.
Indicazioni pratiche e problemi frequenti
- La transizione non parte: verifica che la proprietà cambi davvero, che la durata non sia zero e che il passaggio tra i valori sia animabile.
- Il movimento copre altri contenuti: transform non ridistribuisce normalmente gli elementi vicini. Prevedi spazio adeguato.
- Il testo diventa troppo chiaro: opacity rende trasparente tutto il gruppo. Se vuoi modificare soltanto lo sfondo, usa un colore con trasparenza.
- L’elemento invisibile riceve ancora clic o focus: opacity: 0 non lo rimuove dal layout né dall’interazione.
- Un pulsante deve essere disabilitato: usa l’attributo HTML disabled. Cursor: not-allowed e pointer-events: none non disabilitano da soli il controllo in tutti i modi di interazione.
- Un effetto funziona solo col mouse: prevedi uno stato appropriato anche per la tastiera e controlla il risultato sui dispositivi touch.
- Il movimento è eccessivo: limita durata e spostamenti e rispetta prefers-reduced-motion. Evita lampeggi e animazioni continue non necessarie.
- Compaiono sovrapposizioni inattese: transform diverso da none e opacity minore di uno possono creare contesti di sovrapposizione, influenzando il confronto tra z-index.
Per movimenti semplici, transform e opacity sono spesso buoni punti di partenza. Evita di animare molte proprietà contemporaneamente e verifica sempre il risultato nel browser.