Proprietà delle animazioni

7.1 Proprietà animation-name

Le animazioni CSS permettono di creare effetti visivi dinamici e fluidi, migliorando l'interfaccia utente e rendendola più interattiva. Le proprietà delle animazioni permettono di controllare vari aspetti dell'animazione, come il nome, la durata, la funzione di temporizzazione e il ritardo. Ora esamineremo queste proprietà nel dettaglio e mostreremo come utilizzarle.

La proprietà animation-name definisce il nome dell'animazione che verrà applicata all'elemento. Il nome deve corrispondere a quello definito nella regola @keyframes.

Sintassi:

    
      element {
        animation-name: animation-name;
      }
    
  

Dove:

• animation-name: nome dell'animazione definito in @keyframes

Esempio:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Spiegazione del codice:

• @keyframes moveRight: definisce un'animazione con il nome moveRight, che sposta l'elemento a destra
• .box: elemento con l'animazione moveRight applicata

7.2 Proprietà animation-duration

La proprietà animation-duration definisce la durata dell'animazione. Il valore è specificato in secondi (s) o millisecondi (ms).

Sintassi:

    
      element {
        animation-duration: time;
      }
    
  

Dove:

• time: durata dell'animazione (ad esempio, 2s per due secondi o 500ms per 500 millisecondi).

Esempio:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Spiegazione del codice:

• animation-duration: 2s: imposta la durata dell'animazione moveRight a 2 secondi

7.3 Proprietà animation-timing-function

La proprietà animation-timing-function definisce la velocità di cambiamento dell'animazione nel tempo. Permette di creare diversi effetti di animazione, come accelerazione, decelerazione, ecc.

Sintassi:

    
      element {
        animation-timing-function: function;
      }
    
  

Dove:

• function: funzione di temporizzazione che determina la velocità di cambiamento dell'animazione (ad esempio, ease, linear, ease-in, ease-out, ease-in-out)

Esempio:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Spiegazione del codice:

• animation-timing-function: ease-in-out: imposta la funzione di temporizzazione per l'animazione moveRight, rendendo l'animazione fluida con un inizio e una fine lenti e accelerazione nel mezzo

Principali funzioni di temporizzazione:

• ease: l'animazione inizia lentamente, accelera al centro e rallenta alla fine
• linear: l'animazione procede a velocità costante dall'inizio alla fine
• ease-in: l'animazione inizia lentamente e poi accelera
• ease-out: l'animazione inizia rapidamente e poi rallenta
• ease-in-out: l'animazione inizia e finisce lentamente, accelerando nel mezzo

7.4 Proprietà animation-delay

La proprietà animation-delay definisce il ritardo prima dell'inizio dell'animazione. Il valore è specificato in secondi (s) o millisecondi (ms).

Sintassi:

    
      element {
        animation-delay: time;
      }
    
  

Dove:

• time: ritardo prima dell'inizio dell'animazione (ad esempio, 1s per un secondo o 500ms per 500 millisecondi)

Esempio:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Spiegazione del codice:

• animation-delay: 1s: imposta un ritardo prima dell'inizio dell'animazione moveRight di 1 secondo