Transizioni

Internet Explorer 10 e le app di Windows Store scritte in JavaScript supportano le transizioni CSS3 (Cascading Style Sheets, Level 3), Le transizioni ti consentono di creare animazioni semplici cambiando in modo uniforme i valori delle proprietà CSS (Cascading Style Sheet) in un intervallo di tempo specificato. Ad esempio, puoi modificare le dimensioni e il colore di un oggetto in un intervallo di 10 secondi. I risultati che prima ottenevi con una combinazione complicata di CSS e JavaScript possono essere raggiunti usando solo CSS. Le transizioni CSS3 sono definite dal World Wide Web Consortium (W3C) nella specifica CSS Transitions Module Level 3, attualmente disponibile come Working Draft.

Nota  Le proprietà 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. Questo 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 transizione devono essere opportunamente aggiornate.

Questo argomento fornisce una panoramica delle proprietà alla base delle transizioni CSS3 e mostra un semplice esempio di transizioni in uso.

Per un elenco delle proprietà CSS a cui è possibile applicare transizioni, vedi Proprietà di animazione e transizione.

Proprietà transition-property

La proprietà transition-property viene usata per identificare una o più proprietà CSS a cui si applicano gli effetti di transizione quando si specifica un nuovo valore della proprietà.

ProprietàDescrizione

transition-property

Indica il nome o i nomi della proprietà CSS a cui viene applicato l'effetto di transizione quando si specifica un nuovo valore della proprietà. La proprietà transition-property può essere impostata su un elenco di valori separati da virgole contenente le proprietà CSS o su uno dei valori seguenti:

  • none  Non viene applicato alcun effetto di transizione quanto si specifica un nuovo valore della proprietà. Tutte le proprietà di transizione vengono ignorate.
  • all  Questo è il valore predefinito. Per tutte le proprietà che supportano le transizioni viene applicato l'effetto di transizione quando si specifica un nuovo valore per la proprietà

 

Oltre ad applicare le transizioni alle proprietà CSS di base, come posizionamento, colore, tipi di carattere e così via, puoi applicare le transizioni anche alle nuove proprietà CSS supportate, quali opacity e border-radius, nonché alle trasformazioni 2D e 3D.

Tieni presente che quando interrompi una transizione, si inverte automaticamente.

Proprietà transition-duration

La proprietà transition-duration definisce la durata di una transizione.

ProprietàDescrizione

transition-duration

Specifica uno o più valori di tempo delimitati da virgole, ognuno dei quali indica il tempo impiegato da una transizione dal vecchio valore al nuovo. Ogni valore è rappresentato da un numero a virgola mobile, seguito da un indicatore dell'unità di tempo (ms o s).

 

Proprietà transition-timing-function

La proprietà transition-timing-function consente la variazione della velocità della transizione nel corso della sua durata descrivendo la modalità di calcolo dei valori intermedi usati durante una transizione. 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 la curva in modo esplicito usando la funzione cubic-bezier e immettendo i quattro valori manualmente o puoi scegliere tra le diverse parole chiave function, ognuna delle quali corrisponde a una funzione di temporizzazione di uso comune.

ProprietàDescrizione

transition-timing-function

Specifica una o più funzioni di temporizzazione delimitate da virgole che definiscono i valori intermedi della proprietà usati durante una transizione in un set di proprietà oggetto corrispondenti. I valori possibili sono i seguenti: Per leggere le descrizioni delle singole funzioni, vedi la pagina di riferimento della proprietà transition-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 (estremi 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. Questo ti consente di creare effetti di transizione "elastici" o "di rimbalzo".
  • ease  Questo è il valore predefinito. 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 ha una velocità coerente dall'inizio alla fine.
  • ease-in  Questa funzione di temporizzazione aumenta gradualmente la velocità all'inizio.
  • ease-out  Questa funzione di temporizzazione riduce gradualmente la velocità alla fine.
  • ease-in-out  Questa funzione di temporizzazione aumenta gradualmente la velocità all'inizio, quindi la riduce gradualmente alla fine.
  • steps  Questa funzione di temporizzazione definisce una funzione di temporizzazione suddivisa in passaggi e accetta 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 è vincolato al valore di inizio o di fine. Corrisponde all'impostazione predefinita.

 

Proprietà transition-delay

La proprietà transition-delay consente di ritardare l'inizio di una transizione o di fare in modo che la transizione appia già in corso. Se il valore della proprietà transition-delay è negativo, la transizione verrà eseguita subito dopo che è stata applicata, ma sembrerà che l'esecuzione sia iniziata in corrispondenza di un offset specificato o durante il suo ciclo di riproduzione.

ProprietàDescrizione

transition-delay

Specifica uno o più valori di offset delimitati da virgole all'interno di una transizione (la quantità di tempo dall'inizio della transizione) prima che la transizione venga visualizzata per un set di proprietà oggetto corrispondenti. Ogni valore è rappresentato da un numero a virgola mobile, seguito da un indicatore dell'unità di tempo (ms o s).

 

Proprietà transition

La proprietà a sintassi abbreviata transition combina le quattro proprietà di transizione descritte in precedenza in una singola proprietà.

ProprietàDescrizione

transition

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

Se disponi di più di un set di valori delle quattro proprietà di transizione, devi separare ogni set con una virgola.

 

Esempio

Per vedere le transizioni CSS3 in azione, vedi la dimostrazione relativa alle transizioni nel sito IE Test Drive.

Il semplice esempio che segue mostra come usare le transizioni CSS3 per variare una proprietà CSS applicata a un elemento div nel tempo.

Innanzitutto creeremo un elemento div contenente testo e vi applicheremo alcuni stili:


<!DOCTYPE html>
<html lang="en-us">

<head>
<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>


Guarda questa pagina.

Facciamo scomparire lentamente div nel tempo variando la proprietà opacity quando l'utente fa clic (o tocca) e tiene premuto div. Imposteremo i valori "prima" e "dopo" per la proprietà opacity. Assegneremo a div un'opacità pari a "1" per iniziare e quindi "0" quando l'elemento div è "attivo". A questo scopo aggiungeremo proprietà opacity in modo che la sezione relativa allo stile appaia come illustrato di seguito:


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


Ora quando fai clic (o tocchi) e tieni premuto l'elemento div verde, questo scomparirà immediatamente finché tieni premuto il pulsante del mouse (o il dito). Guarda questa pagina.

Ora possiamo aggiungere le proprietà di transizione CSS per ridurre gradualmente l'opacità. In primo luogo, identifichiamo la proprietà a cui applicare la transizione usando la proprietà transition-property:


transition-property: opacity;

Aggiungiamo quindi una durata per la transizione usando la proprietà transition-duration:


transition-duration: 5s;

Definiamo ora la funzione di temporizzazione da usare con la proprietà transition-timing-function. Per rendere uniforme la transizione di div, useremo la funzione di temporizzazione lineare:


transition-timing-function: linear;

Possiamo anche ritardare la transizione di un secondo usando la proprietà transition-delay:


transition-delay: 1s;

Queste quattro proprietà faranno in modo che la transizione della proprietà opacity venga eseguita in modo uniforme per 5 secondi dopo 1 secondo. Per combinare le quattro proprietà, puoi anche usare la proprietà transition a sintassi abbreviata:


transition: opacity 5s linear 1s;

Guarda questa pagina.

Per applicare la transizione a più di una proprietà di un elemento, imposta più valori per le proprietà di transizione, ognuno separato da una virgola. Ad esempio, puoi aggiungere una modifica di colore al nostro esempio precedente. Aggiungi innanzitutto una proprietà background-color al selettore div :active. Cambia quindi la proprietà transition come segue:


transition: opacity 5s linear 1s, background-color 2s ease;

Questa proprietà aggiunge una transizione di colore al viola in due secondi, usando la funzione di temporizzazione di interpolazione. Non essendo presente un valore di ritardo, la transizione inizia immediatamente. Guarda questa pagina.

Eventi DOM di transizione

Internet Explorer 10 e le app di Windows Store scritte in JavaScript definiscono due eventi di transizione:

transitionstart

L'evento transitionstart si verifica all'inizio della transizione.

transitionend

L'evento transitionend si verifica al completamento della transizione. Se la transizione viene rimossa prima del completamento, l'evento non verrà generato.

Questo esempio applica le transizioni a un elemento <div> e genera gli eventi transitionstart e transitionend per cambiare il testo nella casella. Prova l'esempio online.


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


Informazioni di riferimento sulle API

Transitions

Esempi ed esercitazioni

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

Dimostrazioni di Internet Explorer Test Drive

Hands On: Transitions
CSS3 3D Transforms in IE10
Creazione di pagine con animazioni e trasformazioni CSS

Post di IEBlog

Full-page Animations Using CSS
Adding Personality with CSS3 Transitions and Animations

Specifica

CSS Transitions

Argomenti correlati

App dall'aspetto accattivante con le transizioni CSS3

 

 

Mostra:
© 2015 Microsoft