CSS  »  Articoli  »  CSS 3 

L’effetto è del tutto identico ed è stato realizzato utilizzando semplicemente le due proprietà viste finora. Ecco il quarto esempio, realizzato solo con i CSS.

Transition-delay

transition-delay permette di ritardare l’esecuzione della transizione del numero di secondi passati come parametro.

Riprendiamo l’esempio 3 e aggiungiamo un ritardo di 2 secondi all’inizio della transizione. Il codice da aggiungere è il seguente:

div {
 ...

 transition-delay: 2s;
 -webkit-transition-delay: 2s;
 -o-transition-delay: 2s;
 -moz-transition-delay: 2s;
}

Il nuovo esempio (esempio 5) è disponibile a questo indirizzo.

Transition-timing-function

transition-timing-function descrive come i valori intermedi usati durante la transizione vengono calcolati. Anzich&ecute; utilizzare una ripartizione lineare del tempo è possibile utilizzare delle funzioni che cambiano velocità durante la transizione. Tali effetti vengono identificati con il termine easing e sono basati sulla Curva di Bèzier. 

Le funzioni a disposizione sono le seguenti:

• ease;
• linear;
• ease-in;
• ease-out;
• ease-in-out;
• cubic-bezier con cui è possibile realizzare tutte le funzioni precedenti e realizzare funzioni personalizzate.

Vediamo un semplicissimo esempio del funzionamento di tali funzioni. Realizziamo una transizione sulla dimensione in larghezza di un div. Il codice necessario è il seguente:

div {
 ...

 transition-timing-function: ease;
 -webkit-transition-timing-function: ease;
 -o-transition-timing-function: ease;
 -moz-transition-timing-function: ease;
}

Il risultato è visualizzabile nell’esempio 6.

Le funzioni di transizione messe a confronto possiamo vederle nell’esempio 7.

Combinare le transizioni

Abbiamo visto finora che è possibile assegnare la transizione a più proprietà contemporaneamente ma, tutte terminavano entro lo stesso tempo. È possibile, invece, assegnare una durata e/o un valore di ritardo ad ogni singola proprietà indipendente dalle altre. Vediamo un esempio per capire come:

div {
  transition-property: background-color, width, height; 
  transition-duration: 5s, 10s, 2s;
  transition-delay: 0s, 0s, 4s;
}

Dal codice precedente abbiamo visto che è sufficiente separare con una virgola i valori di durata e ritardo per assegnarli alla proprietà corrispondente.

L’effetto è visualizzabile nell’esempio 8.

Altri articoli

Altre guide

Altre newsletter