Animazioni

Internet Explorer 10 e le app di Windows Store scritte in JavaScript supportano le animazioni CSS (Cascading Style Sheets), che ti consentono di creare applicazioni sofisticate e graficamente accattivanti con elementi animati fluidi e uniformi.

Le animazioni CSS sono definite dal World Wide Web Consortium (W3C) nella specifica delle animazioni CSS.

Le animazioni sono simili alle transizioni in quanto animano gli elementi in seguito al cambiamento di posizione, dimensioni, colore e opacità e anche quando vengono ruotati, ridimensionati, traslati e così via. Come per le transizioni, puoi specificare le funzioni di temporizzazione per controllare la velocità di progressione di un'animazione.

Tuttavia, con le animazioni CSS3 (Cascading Style Sheets, livello 3) puoi anche utilizzare i fotogrammi chiave, che durante l'animazione specificano i valori delle proprietà di animazione in vari punti. In questo modo puoi definire il comportamento di un'animazione non solo all'inizio e alla fine dell'animazione, ma anche nel mezzo. Le animazioni possono avere anche iterazioni e funzionalità di inversione della direzione ed essere impostate per sospendersi e poi riprendere.

Come puoi immaginare, le animazioni CSS3 offrono infinite possibilità per la creazione di esperienze sofisticate e accattivanti. Questo argomento fornisce una breve panoramica della creazione di un'animazione CSS in Internet Explorer 10 e nelle app di Windows Store scritte in JavaScript e mostra un esempio pratico dell'uso di animazioni CSS3.

Le proprietà, la direttiva at-rule e gli eventi descritti in questo argomento richiedevano in precedenza un prefisso fornitore specifico di Microsoft, "-ms-", per funzionare con Internet Explorer 10 e le app di Windows Store scritte in JavaScript. Tale prefisso non è più necessario ma viene comunque riconosciuto. Per assicurare la compatibilità con le versioni future, le applicazioni che usano il prefisso fornitore di Microsoft con proprietà di animazione devono essere opportunamente aggiornate.

Per un elenco delle proprietà CSS che puoi animare, vedi Proprietà di animazione e transizione.

Creazione di un'animazione

Per creare un'animazione devi seguire tre passaggi di base:

1. Specificare le proprietà dell'animazione.
2. Creare i fotogrammi chiave.
3. Applicare l'animazione a uno o più elementi.

Specificare le proprietà dell'animazione

Prima di tutto, specifica le proprietà dell'animazione in un selettore relativo all'elemento che vuoi animare. Le proprietà dell'animazione sono descritte in questa sezione.

Proprietà animation-name

La proprietà animation-name specifica gli identificatori dell'animazione (ovvero il "nome" assegnato alla specifica animazione). Un identificatore dell'animazione seleziona una direttiva at-rule @keyframes CSS la cui sintassi è mostrata di seguito:

ProprietàDescrizione

animation-name

Specifica uno o più identificatori dell'animazione. Le animazioni vengono identificate mediante la direttiva at-rule @keyframes CSS.

 

Proprietà animation-duration

La proprietà animation-duration specifica la quantità di tempo necessaria per completare un ciclo dell'animazione. Ecco la sintassi:

ProprietàDescrizione

animation-duration

Indica uno o più valori temporali separati da virgole, ciascuno dei quali indica la durata di un ciclo di animazione completo. Ogni valore è espresso sotto forma di numero a virgola mobile, seguito da un indicatore dell'unità di tempo (ms o s). Questa proprietà accetta valori negativi.

 

Proprietà animation-timing-function

La proprietà animation-timing-function consente la variazione della velocità dell'animazione nel corso della sua durata descrivendo la modalità di calcolo dei valori intermedi della proprietà durante un singolo ciclo dell'animazione. A questo scopo devi specificare una funzione di temporizzazione dell'animazione basata su una curva di Bézier cubica, che accetta quattro parametri. Puoi specificare una funzione di temporizzazione per l'intera animazione oppure per i singoli fotogrammi chiave.

Puoi specificare la curva sia in modo esplicito, con la funzione cubic-bezier e inserendo manualmente i quattro valori, sia scegliendo tra diverse parole chiave della funzione, ciascuna delle quali corrisponde a una funzione di temporizzazione usata comunemente. La sintassi della proprietà è mostrata qui:

ProprietàDescrizione

animation-timing-function

Specifica una o più funzioni di temporizzazione separate da virgole che definiscono i valori intermedi della proprietà usati durante un singolo ciclo dell'animazione. L'animazione viene calcolata su un set di proprietà dell'oggetto corrispondenti nella direttiva at-rule @keyframes CSS specificata dalla proprietà animation-name. I valori possibili sono i seguenti: Per leggere le descrizioni delle singole funzioni, vedi la pagina di riferimento della proprietà animation-timing-function.

cubic-bezier(x1,y1,x2,y2)

I quattro parametri di questa funzione devono essere valori a virgola mobile compresi tra 0 e 1 inclusi. I valori corrispondono alle coordinate x e y dei punti P1 e P2 della curva di Bézier cubica. Per le proprietà diverse da opacity e color, la funzione della curvacubic-bezier accetta le coordinate y al di fuori dell'intervallo standard compreso tra 0 e 1. In questo modo si possono creare effetti di transizione "elastici" o "di rimbalzo".

ease

Questo è il valore iniziale. Questa funzione di temporizzazione aumenta gradualmente la velocità all'inizio, esegue l'animazione alla massima velocità, quindi diminuisce gradualmente la velocità alla fine.

linear

Questa funzione di temporizzazione mantiene una velocità costante dall'inizio alla fine.

ease-in

Questa funzione di temporizzazione aumenta gradatamente la velocità all'avvio.

ease-out

Questa funzione di temporizzazione diminuisce gradatamente di velocità al termine.

ease-in-out

Questa funzione di temporizzazione aumenta gradatamente la velocità all'avvio, quindi diminuisce gradatamente di velocità al termine.

steps

Questa funzione di temporizzazione definisce una funzione di temporizzazione suddivisa in passaggi e usa due parametri Il primo parametro specifica il numero di intervalli, il secondo parametro facoltativo specifica il punto nell'intervallo in cui il valore della proprietà cambia. Il secondo parametro può assumere solo i valori start o end, che è il valore predefinito.

 

Proprietà animation-iteration-count

La proprietà animation-iteration-count definisce il numero di volte in cui viene riprodotto un ciclo dell'animazione. Ecco la sintassi della proprietà:

ProprietàDescrizione

animation-iteration-count

Specifica il numero di esecuzioni di un ciclo di animazione. In caso di più valori, questi sono separati da virgole.

<number>

Il numero di esecuzioni di un ciclo di animazione. Puoi specificare un numero non intero, l'animazione avrà termine a un certo punto del ciclo. Il valore iniziale è "1".

infinite

L'animazione si ripete per sempre.

Se si specifica un valore negativo o pari a "0", non verrà applicata nessuna animazione.

Puoi usare la proprietà animation-iteration-count con la proprietà animation-direction impostata su alternate, il che determina la riproduzione inversa dell'animazione a cicli alternati.

 

Proprietà animation-direction

La proprietà animation-direction specifica la direzione di riproduzione di un ciclo dell'animazione. Ecco la sintassi della proprietà:

ProprietàDescrizione

animation-direction

Definisce se l'animazione deve essere eseguita al contrario a cicli alternati. Si può impostare questa proprietà su uno o più dei seguenti valori separati da virgole:

normal

Questo è il valore iniziale. Indica che l'animazione non verrà eseguita al contrario a cicli alternati.

reverse

Questo valore indica che i cicli di animazione vengono eseguiti nella direzione contraria a quella specificata.

alternate

Questo valore indica che i cicli di animazione si alternano tra esecuzione in avanti (iterazioni dispari) ed esecuzione all'indietro (iterazioni pari).

alternate-reverse

Questo valore indica che i cicli di animazione si alternano tra esecuzione all'indietro (iterazioni dispari) ed esecuzione in avanti (iterazioni pari).

 

Proprietà animation-play-state

La proprietà animation-play-state specifica se un'animazione è in riproduzione o in pausa. Questa proprietà può risultare utile per creare un meccanismo che consenta all'utente di mettere in pausa un'animazione. Ecco la sintassi della proprietà:

ProprietàDescrizione

animation-play-state

Definisce se l'animazione è in esecuzione o in pausa. Si può impostare questa proprietà su uno o più dei seguenti valori separati da virgole:

paused

Mette in pausa l'esecuzione di un'animazione. L'animazione continua a visualizzare il valore corrente dell'animazione allo stato statico, come se la durata dell'animazione fosse costante.

running

Riprende l'esecuzione di un'animazione in pausa. L'animazione riprende a partire dal valore corrente.

 

Proprietà animation-delay

La proprietà animation-delay definisce quando avviare un'animazione e ne consente l'inizio dopo un determinato periodo di tempo da quando viene applicata. Ecco la sintassi:

ProprietàDescrizione

animation-delay

Specifica uno o più valori di offset separati da virgole all'interno di un'animazione (il tempo che intercorre dall'avvio dell'animazione) prima che l'animazione venga visualizzata per un insieme di proprietà dell'oggetto corrispondenti. Ogni valore è espresso sotto forma di numero a virgola mobile, seguito da un indicatore dell'unità di tempo (ms o s).

  • Il valore iniziale è "0" e indica che l'animazione viene eseguita non appena applicata.
  • Un valore negativo indica che l'animazione verrà eseguita non appena viene applicato, ma l'esecuzione risulterà avviata a partire dall'offset specificato o durante il ciclo di esecuzione.

 

Proprietà animation-fill-mode

La proprietà animation-fill-mode definisce se gli effetti di un'animazione sono visibili prima o dopo la riproduzione. Per impostazione predefinita, un'animazione non influisce sui valori della proprietà nel periodo di tempo tra la sua applicazione e la sua esecuzione (durante l'eventuale ritardo definito dalla proprietà animation-delay). Inoltre, per impostazione predefinita, un'animazione non influisce sui valori della proprietà al termine dell'animazione (allo scadere del tempo definito dalla proprietà animation-duration). La proprietà animation-fill-mode è usata per l'override di questi comportamenti predefiniti. Ecco la sintassi:

ProprietàDescrizione

animation-fill-mode

Specifica uno o più valori separati da virgole che definiscono il comportamento dell'animazione al di fuori del periodo di esecuzione. Può essere impostata su uno qualunque dei valori seguenti:

none

Il valore predefinito è invariato.

forwards

Il valore finale della proprietà (come definito nell'ultimo fotogramma chiave) viene mantenuto dopo l'esecuzione dell'animazione.

backwards

Il valore iniziale della proprietà (come definito nel primo fotogramma chiave) viene applicato prima della visualizzazione dell'animazione, durante il periodo definito da animation-delay.

both

Sono applicate sia la modalità di riempimento in avanti, sia indietro.

 

Proprietà animation

La proprietà a sintassi abbreviata animation combina sei proprietà dell'animazione in una singola proprietà. Ecco la sintassi:

ProprietàDescrizione

animation

Specifica uno o più set di proprietà dell'animazione delimitati da spazi per un set di proprietà oggetto corrispondenti. I valori delle proprietà dell'animazione devono essere impostati nell'ordine seguente:

Se disponi di più di un set di valori delle sei proprietà dell'animazione, devi separare ogni set con una virgola.

 

Prendi il seguente esempio di codice, che definisce più proprietà dell'animazione su un elemento div:


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


Con la proprietà a sintassi abbreviata animation puoi specificare tutte e sei queste proprietà in un'unica riga, come illustrato qui:


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


Creare i fotogrammi chiave

Successivamente, specifica i fotogrammi chiave dell'animazione. I fotogrammi chiave ti consentono di controllare con precisione i valori intermedi di un'animazione. La regola @keyframes specifica un elenco di fotogrammi chiave dell'animazione della proprietà per un oggetto nonché un identificatore per l'animazione. Ecco la sintassi:

RegolaDescrizione

@keyframes

Un elenco di fotogrammi chiave della proprietà di animazione di un oggetto del documento HTML. Questa regola è utilizzata per specificare i valori della proprietà in vari punti dell'animazione, come pure un identificatore dell'animazione. Specifica i valori della proprietà durante un ciclo dell'animazione. L'animazione può essere ripetuta una o più volte.

Questa regola usa i selettori dei fotogrammi chiave per specificare i valori della proprietà in varie fasi dell'animazione. I selettori dei fotogrammi chiave possono essere definiti come from (equivalente allo 0%), to (equivalente al 100%), e una o più percentuali.

 

L'esempio seguente dimostra tre selettori dei fotogrammi chiave, ciascuno con due descrittori dei fotogrammi chiave.


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

In questo esempio, sono specificati i fotogrammi chiave di tre punti dell'animazione: l'inizio (valore from, o 0%), il 40% e la fine (valore to, o 100%).

Puoi anche specificare la funzione di temporizzazione da usare mentre l'animazione passa al fotogramma chiave successivo. È sufficiente includere la proprietà animation-timing-function nel selettore del fotogramma chiave appropriato.

Applicare l'animazione

Infine, applica lo stile dell'animazione a un elemento. In genere, l'azione è attivata da un evento, ad esempio il clic di un pulsante (o tocco). Tieni presente che, a differenza delle transazioni, non è possibile interrompere un'animazione CSS modificando i valori della proprietà di animazione. Un'animazione CSS può essere interrotta solo mediante la proprietà animation-play-state oppure aggiungendo o rimuovendo il nome dell'animazione.

Al termine dell'animazione, le proprietà animate tornano ai valori originali.

Esempio

Nell'esempio successivo viene mostrata un'animazione CSS creata con la demo Hands On: Animations del sito IE Test Drive.

Per cominciare, creeremo un elemento div contenente testo a cui applicheremo alcuni stili:


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI";
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>


Per vedere qual è l'aspetto del codice, guarda questa pagina.

Ora definiremo alcuni parametri dell'animazione. Aggiungeremo un selettore alla sezione style che usa la pseudoclasse :active. Ciò significa che l'animazione durerà solo per il tempo che l'utente fa clic (o tocca) e tiene premuto il blocco di testo. L'animazione continua fino al termine.

Per assicurarci che l'animazione inizi subito, duri per 5 secondi, venga ripetuta una volta (per un totale di due iterazioni) e venga identificata con il nome i "demo", aggiungiamo il selettore seguente:


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

Ora creeremo tre fotogrammi chiave—uno per la parte iniziale dell'animazione, uno per quella centrale e uno per quella finale. All'interno di ogni fotogramma chiave definiremo le proprietà che verranno modificate e le funzioni di temporizzazione per definire la velocità di modifica.


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

Abbiamo definito due proprietà per animare, background-color e transform. Nel corso di un singolo ciclo dell'animazione, il colore di sfondo dell'elemento div si anima da verde limone (il colore originale) a viola e poi a blu. L'elemento div viene anche spostato a destra e verso il basso rispettivamente di 20 e 30 pixel, per poi tornare indietro. L'animazione utilizza la funzione di temporizzazione ease per l'animazione dal punto di inizio fino al punto intermedio (il fotogramma chiave al 50%) e poi la funzione di temporizzazione ease-in per l'animazione dal punto intermedio alla fine. L'animazione si ripete una volta.

Guarda questa animazione (devi avere Internet Explorer 10 per visualizzarla).

Eventi DOM delle animazioni

Internet Explorer 10 e le app di Windows Store scritte in JavaScript definiscono tre eventi Document Object Model (DOM) per le animazioni:

animationstart

L'evento animationstart si verifica all'inizio dell'animazione, tenendo conto, se necessario, dell'eventuale ritardo dell'animazione (come specificato dalla proprietà animation-delay). Un ritardo negativo causa la generazione dell'evento dopo che è trascorso un periodo di tempo uguale al valore assoluto del ritardo.

animationend

L'evento animationend si verifica al termine dell'animazione.

animationiteration

L'evento animationiteration si verifica alla fine di ogni iterazione di un'animazione. Questo evento si verifica solo se la proprietà animation-iteration-count è maggiore di uno.

  • Bubble: sì
  • Cancellabile: sì

Questo esempio anima un elemento <div> e genera gli eventi animationend, animationend e animationiteration per cambiare il testo nella casella. Prova l'esempio online.


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


Informazioni di riferimento sulle API

Animations

Esempi ed esercitazioni

Come realizzare una pagina Web con trasformazioni, transizioni e animazioni CSS

Dimostrazioni di Internet Explorer Test Drive

Hands On: Animations
Creazione di pagine con animazioni e trasformazioni CSS
Beta Fish IE

Post di IEBlog

Adding Personality with CSS3 Transitions and Animations
Full-page Animations Using CSS
CSS3 3D Transforms in IE10

Specifica

CSS Animations

Argomenti correlati

Creare app straordinarie con le animazioni CSS3
Animazione CSS3 con fallback jQuery

 

 

Mostra:
© 2015 Microsoft