Layout griglia animati CSS

In CSS Grid, le proprietà grid-template-columns e grid-template-rows ti consentono di definire i nomi delle righe e di monitorare le dimensioni delle colonne e delle righe della griglia, rispettivamente. Il supporto dell'interpolazione per queste proprietà consente ai layout della griglia di passare senza problemi da uno stato all'altro, anziché scattare a metà di un'animazione o di una transizione.

Supporto dei browser

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

In CSS puoi passare senza problemi da un valore all'altro utilizzando la proprietà transition.

#target {
 
opacity: 0.5;
 
transition: opacity ease-in-out 0.25s;
}

#target:hover {
 
opacity: 1;
}

Il motore di rendering rileverà automaticamente il tipo del valore della proprietà scelta come target e utilizzerà queste informazioni per passare senza problemi al nuovo valore.

Ad esempio:

  • Stai eseguendo la transizione di opacity da 0 a 1? Si tratta di un'interpolazione numerica.
  • Stai eseguendo la transizione di background-color da white a black? Effetto sfumato tra i colori di origine e di destinazione.
  • Transizione di width? Interpola numericamente, convertendo le unità lungo il percorso, se necessario.

Lo stesso vale per le animazioni CSS, in cui il browser eseguirà l'interpolazione dei valori tra i fotogrammi chiave.

Anima grid-template-columns e grid-template-rows

I layout della griglia possono anche passare senza problemi da uno stato all'altro, anziché scattare a metà di un'animazione o di una transizione.

Nella demo seguente una griglia mostra diversi avatar. Per risparmiare spazio, gli avatar vengono disposti uno sopra l'altro limitando la larghezza di ogni colonna utilizzando grid-template-columns. Al passaggio del mouse, a ogni colonna viene assegnato più spazio.

.avatars {
 
display: grid;
 
gap: 0.35em;

 
grid-auto-flow: column;
 
grid-template-columns: repeat(4, 2em);
 
transition: all ease-in-out 0.25s;
}

.avatars:hover {
 
grid-template-columns: repeat(4, 4em);
}

Con la proprietà transition impostata, la griglia esegue un'interpolazione uniforme tra i valori.

L'effetto si applica anche alle animazioni che modificano i valori grid-template-columns o grid-template-rows.