I CSS consentono l'animazione di elementi HTML senza utilizzare JavaScript o Flash!

In questo articolo impareremo a conoscere 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 CSS?

Un'animazione consente a un elemento di cambiare gradualmente da uno stile all'altro.

Si può modificare tutte le proprietà CSS che si desidera, tutte le volte che si vuole.

Per utilizzare l'animazione CSS, si deve prima specificare alcuni fotogrammi chiave per l'animazione.

I fotogrammi chiave contengono gli stili che l'elemento avrà in determinati momenti.

La regola @keyframes

Quando si specificano 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, è necessario associare l'animazione a un elemento.

L'esempio seguente associa l'animazione "example" all'elemento <div>. L'animazione durerà 4 secondi e cambierà gradualmente il colore di sfondo dell'elemento <div> da "rosso" a "giallo":

/* Il codice dell'animazione */
@keyframes example {
  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: example;
  animation-duration: 4s;
}

Visualizza esempio

Nell'esempio sopra abbiamo specificato quando cambierà lo stile utilizzando le parole chiave "from" e "to" (che rappresenta 0% (inizio) e 100% (completo)).

È anche possibile utilizzare la percentuale. Utilizzando la percentuale, puoi aggiungere tutte le modifiche di stile che desideri.

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 example {
  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: example;
  animation-duration: 4s;
}

Visualizza esempio

L'esempio seguente modificherà 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 example {
  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: example;
  animation-duration: 4s;
}

Visualizza esempio

Ritardare un'animazione

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

L'esempio seguente ha un ritardo di 2 secondi prima dell'avvio dell'animazione:

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

Visualizza esempio

Sono consentiti anche valori negativi. Se si utilizzano valori negativi, l'animazione inizierà come se fosse già stata riprodotta per N secondi.

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

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

Visualizza esempio

Impostare quante volte deve essere eseguita un'animazione

La proprietà animation-iteration-count specifica il numero di volte in cui un'animazione deve essere eseguita.

L'esempio seguente eseguirà l'animazione 3 volte prima di interrompersi:

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

Visualizza esempio

L'esempio seguente utilizza il valore "infinite" per far sì che l'animazione continui all'infinito:

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

Visualizza esempio

Eseguire l'animazione in direzione inversa o cicli alternativi

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). Questa è l'impostazione predefinita
• reverse - L'animazione viene riprodotta in direzione inversa (all'indietro)
• alternate- L'animazione viene riprodotta prima in avanti, poi all'indietro
• alternate-reverse - L'animazione viene riprodotta prima all'indietro, poi in avanti

L'esempio seguente eseguirà l'animazione nella direzione inversa (all'indietro):

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

Visualizza esempio

L'esempio seguente utilizza il valore "alternate" per far sì che l'animazione venga eseguita prima in avanti e poi all'indietro:

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

Visualizza esempio

L'esempio seguente utilizza il valore "alternate-reverse" per far sì che l'animazione venga eseguita prima all'indietro e poi in avanti:

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

Visualizza esempio

Specificare la curva di velocità dell'animazione

La proprietà animation-timing-function specifica la curva di velocità dell'animazione.

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

• ease - Specifica un'animazione con un inizio lento, poi veloce, quindi termina lentamente (questa è l'impostazione predefinita)
• linear - Specifica un'animazione con la stessa velocità dall'inizio alla fine
• ease-in - Specifica un'animazione con un avvio lento
• ease-out - Specifica un'animazione con una fine lenta
• ease-in-out - Specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) - Consente di definire i propri valori in una funzione cubica-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;}

Visualizza esempio

Specificare la modalità di riempimento per un'animazione

Le animazioni CSS non influiscono su un elemento prima che venga riprodotto il primo fotogramma chiave o dopo la riproduzione dell'ultimo fotogramma chiave. 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 viene riprodotta (prima che inizi, dopo la fine o entrambi).

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

• none - Valore di default. L'animazione non applicherà alcuno stile all'elemento prima o dopo l'esecuzione
• forwards - L'elemento manterrà i valori di stile impostati dall'ultimo fotogramma chiave (dipende dalla direzione dell'animazione e dal conteggio delle iterazioni dell'animazione)
• backwards - L'elemento otterrà i valori di stile impostati dal primo fotogramma chiave (dipende dalla direzione dell'animazione) e li manterrà durante il periodo di ritardo dell'animazione
• both - L'animazione seguirà le regole sia in avanti che all'indietro, estendendo le proprietà dell'animazione in entrambe le direzioni

L'esempio seguente consente all'elemento <div> di conservare i valori di stile dell'ultimo fotogramma chiave al termine dell'animazione:

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

Visualizza esempio

L'esempio seguente consente all'elemento <div> di ottenere i valori di stile impostati dal primo fotogramma chiave prima dell'inizio dell'animazione (durante il periodo di ritardo dell'animazione):

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

Visualizza esempio

L'esempio seguente consente all'elemento <div> di ottenere i valori di stile impostati dal primo fotogramma chiave prima dell'inizio dell'animazione e di conservare i valori di stile dell'ultimo fotogramma chiave al termine dell'animazione:

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

Visualizza esempio

Proprietà abbreviata di animazione

L'esempio seguente utilizza sei delle proprietà di animazione:

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

Visualizza esempio

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

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

Visualizza esempio

Proprietà dell'animazione CSS

La tabella seguente elenca la regola @keyframes e tutte le proprietà di animazione CSS: