Animazioni in CSS

Il CSS consente l’animazione degli elementi HTML senza l’utilizzo di Javascript.

In questa sezione vedremo le seguenti proprietà:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

Cosa sono le Animazioni in CSS?

Un’animazione permette a un elemento di cambiare gradualmente da uno stile a un altro. Puoi cambiare quante proprietà CSS desideri, quante volte desideri.

Per utilizzare l’animazione CSS, devi prima specificare i keyframe per l’animazione. I keyframes indicano quali stili l’elemento avrà in determinati momenti.

La Regola @keyframes

Quando specifici gli stili CSS all’interno della regola @keyframes, l’animazione cambierà gradualmente dallo stile corrente al nuovo stile in determinati momenti.

Per far funzionare un’animazione, devi associarla a un elemento.

/* Il codice dell'animazione */
@keyframes prova {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

/* L'elemento a cui applicare l'animazione */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
}

La proprietà animation-duration definisce quanto tempo ci vorrà per completare l’animazione. Se la proprietà animation-duration non viene specificata, non ci sarà animazione, poiché il valore predefinito è 0s.

L’esempio seguente cambierà il colore di sfondo dell’elemento <div> quando l’animazione è completa al 25%, al 50% e ancora quando l’animazione è completa al 100%:

/* Il codice dell'animazione */
@keyframes prova {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

/* L'elemento a cui applicare l'animazione */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
}

L’esempio seguente cambierà sia il colore di sfondo che la posizione dell’elemento <div> quando l’animazione è completa al 25%, al 50% e ancora quando l’animazione è completa al 100%:

/* Il codice dell'animazione */
@keyframes prova {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

/* L'elemento a cui applicare l'animazione */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
}

Ritardo Animazione

La proprietà animation-delay specifica un ritardo per l’inizio di un’animazione.

L’esempio seguente ha un ritardo di 2 secondi prima di iniziare l’animazione:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
  animation-delay: 2s;
}

Sono ammessi anche valori negativi. Utilizzando valori negativi, l’animazione inizierà come se fosse già in esecuzione da N secondi.

Nell’esempio seguente, l’animazione inizierà come se fosse già in esecuzione da 2 secondi:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
  animation-delay: -2s;
}

Specificare numero di Animazioni

La proprietà animation-iteration-count specifica quante volte un’animazione deve essere eseguita.

L’esempio seguente eseguirà l’animazione 3 volte prima di fermarsi:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

L’esempio seguente utilizza il valore “infinite” per far continuare l’animazione all’infinito:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Animazione Inversa e Cicli Alternati

La proprietà animation-direction specifica se un’animazione deve essere riprodotta in avanti, all’indietro o in cicli alternati.

La proprietà animation-direction può avere i seguenti valori:

• normal - L’animazione viene riprodotta normalmente (in avanti). Questo è il valore predefinito.
• reverse - L’animazione viene riprodotta all’indietro.
• alternate - L’animazione viene riprodotta prima in avanti, quindi all’indietro.
• alternate-reverse - L’animazione viene riprodotta prima all’indietro, quindi in avanti.

L’esempio seguente eseguirà l’animazione in direzione inversa:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
  animation-direction: reverse;
}

L’esempio seguente utilizza il valore “alternate” per far eseguire l’animazione prima in avanti, poi all’indietro:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

L’esempio seguente utilizza il valore “alternate-reverse” per far eseguire l’animazione prima all’indietro, poi in avanti:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: prova;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Curva di Velocità dell’Animazione

La proprietà animation-timing-function specifica la curva di velocità dell’animazione e può avere i seguenti valori:

• ease - Specifica un’animazione con un inizio lento, poi veloce, poi fine lento (predefinito).
• linear - Specifica un’animazione con la stessa velocità dall’inizio alla fine.
• ease-in - Specifica un’animazione con un inizio lento.
• ease-out - Specifica un’animazione con una fine lenta.
• ease-in-out - Specifica un’animazione con un inizio e una fine lenti.
• cubic-bezier(n,n,n,n) - Ti consente di definire i tuoi valori in una funzione cubic-bezier.

L’esempio seguente mostra alcune delle diverse curve di velocità che possono essere utilizzate:

#div1 {
  animation-timing-function: linear;
}
#div2 {
  animation-timing-function: ease;
}
#div3 {
  animation-timing-function: ease-in;
}
#div4 {
  animation-timing-function: ease-out;
}
#div5 {
  animation-timing-function: ease-in-out;
}

Specifica il fill-mode Per un’Animazione

Le animazioni CSS non influenzano un elemento prima che venga riprodotto il primo keyframe o dopo che viene riprodotto l’ultimo keyframe. La proprietà animation-fill-mode può sovrascrivere questo comportamento.

La proprietà animation-fill-mode specifica uno stile per l’elemento di destinazione quando l’animazione non è in riproduzione (prima che inizi, dopo che termina o entrambi).

La proprietà animation-fill-mode può avere i seguenti valori:

• none - Valore predefinito. L’animazione non applica alcuno stile all’elemento prima o dopo che viene eseguita.
• forwards - L’elemento manterrà i valori degli stili impostati dall’ultimo keyframe (dipende da animation-direction e animation-iteration-count).
• backwards - L’elemento acquisirà i valori degli stili impostati dal primo keyframe (dipende da animation-direction) e li manterrà durante il periodo di animation-delay.
• both - L’animazione seguirà le regole sia per forwards che per backwards, estendendo le proprietà dell’animazione in entrambe le direzioni.

L’esempio seguente farà sì che l’elemento <div> mantenga i valori degli stili dell’ultimo keyframe quando l’animazione termina:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: prova;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

L’esempio seguente farà sì che l’elemento <div> acquisisca i valori degli stili impostati dal primo keyframe prima che l’animazione inizi (durante il periodo di animation-delay):

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: prova;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

L’esempio seguente farà sì che l’elemento <div> acquisisca i valori degli stili impostati dal primo keyframe prima che l’animazione inizi e mantenga i valori degli stili dell’ultimo keyframe quando l’animazione termina:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: prova;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Proprietà Animazione Shorthand

L’esempio seguente utilizza sei delle proprietà dell’animazione:

div {
  animation-name: prova;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Lo stesso effetto di animazione di cui sopra può essere ottenuto utilizzando la proprietà shorthand animation:

div {
  animation: prova 5s linear 2s infinite alternate;
}