Transizioni

4.1 La proprietà transition

Transizioni CSS (transition) permettono di animare cambiamenti nei valori delle proprietà CSS, creando passaggi fluidi tra i loro stati iniziali e finali. È uno strumento potente che migliora l'usabilità aggiungendo dinamicità alle pagine web. Vediamo gli aspetti principali delle transizioni, incluse proprietà, durata e funzioni di timing.

La proprietà transition combina tutti gli aspetti della transizione in una sola proprietà. Può includere:

1. Proprietà che verranno animate.
2. Durata dell'animazione.
3. Funzione di timing.
4. Ritardo prima dell'inizio dell'animazione (opzionale).

Sintassi:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Dove:

• property: proprietà a cui si applica la transizione (ad esempio, width, height, background-color)
• duration: durata della transizione (ad esempio, 2s per due secondi o 500ms per 500 millisecondi)
• timing-function: funzione di timing che determina la velocità del cambiamento dell'animazione (ad esempio, ease, linear, ease-in, ease-out, ease-in-out)
• delay: ritardo prima dell'inizio della transizione (ad esempio, 1s per un secondo)

Esempio:

    
      
       
   
       
   
       
   

     Content 
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Spiegazione del codice:

• transition: width 2s ease-in-out, background-color 1s ease: definisce due transizioni: una per la proprietà width con durata di 2 secondi e funzione di timing ease-in-out, e un'altra per la proprietà background-color con durata di 1 secondo e funzione di timing ease

4.2 Proprietà delle transizioni

1. Proprietà transition-property

La proprietà transition-property definisce a quali proprietà dell'elemento verranno applicate le transizioni.

Sintassi:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Esempio:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Proprietà transition-duration

La proprietà transition-duration imposta la durata della transizione.

Sintassi:

    
      element {
        transition-duration: time;
      }
    
  

Esempio:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Proprietà transition-timing-function

La proprietà transition-timing-function determina la velocità del cambiamento dell'animazione nel tempo.

Sintassi:

    
      element {
        transition-timing-function: function;
      }
    
  

Esempio:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Proprietà transition-delay

La proprietà transition-delay imposta il ritardo prima dell'inizio della transizione.

Sintassi:

    
      element {
        transition-delay: time;
      }
    
  

Esempio:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Durata delle transizioni

La durata della transizione determina quanto tempo durerà l'animazione del cambiamento di proprietà. È impostata in secondi (s) o millisecondi (ms).

Esempio:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Spiegazione del codice:

• transition: width 2s, height 1s, background-color 500ms: definisce che la transizione per la proprietà width durerà 2 secondi, per height — 1 secondo, e per background-color — 500 millisecondi.

4.4 Funzioni di timing

Le funzioni di timing determinano come il valore della proprietà cambia nel corso del tempo. Permettono di creare vari effetti di animazione.

Funzioni di timing principali:

• ease: l'animazione inizia lentamente, accelera verso il centro e rallenta verso la fine
• linear: l'animazione prosegue a velocità costante dall'inizio alla fine
• ease-in: l'animazione inizia lentamente e poi accelera
• ease-out: l'animazione inizia velocemente e poi rallenta
• ease-in-out: l'animazione inizia e finisce lentamente, accelerando al centro

Esempio:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Spiegazione del codice:

• ease-in-out: transizione fluida che inizia e termina lentamente
• linear: transizione a velocità costante
• ease: transizione con inizio e fine lenti, accelera verso il centro

1

Compito

Frontend SELF IT, livello 23, lezione 3

Bloccato

Ritardo di transizione

Ritardo di transizione

Apri

1

Compito

Frontend SELF IT, livello 23, lezione 3

Bloccato

Transizioni complesse

Transizioni complesse

Apri