Proprietà CSS transition-duration

La proprietà CSS transition-duration definisce quanto tempo impiega un'animazione di transizione per passare dallo stato iniziale a quello finale. È una delle proprietà CSS3 e un componente longhand della sintassi abbreviata transition.

Questo capitolo spiega come scrivere durate valide, come una singola durata differisce da un elenco separato da virgole, le insidie (valori zero, unità mancanti, lunghezze di elenco non corrispondenti) e come la proprietà si relaziona con il resto della famiglia transition — transition-property, transition-timing-function e transition-delay.

Come si scrive una durata

Una durata è un singolo valore <time>, espresso in secondi (s) o millisecondi (ms):

transition-duration: 0.5s;   /* half a second */
transition-duration: 500ms;  /* the same thing */

Alcune regole fondamentali da conoscere:

L'unità è obbligatoria. Un numero senza unità come transition-duration: 2 non è valido e l'intera dichiarazione viene ignorata. Scrivere sempre 2s o 2000ms.
I valori negativi non sono validi. A differenza di transition-delay, una durata non può essere negativa; il browser tratta una durata negativa come 0s.
0s significa nessuna transizione visibile. Questo è il valore predefinito, quindi il cambiamento di proprietà avviene istantaneamente. È necessario impostare una durata diversa da zero affinché l'animazione sia visibile.

Durate multiple

È possibile specificare una o più durate separate da virgole. Ogni durata viene applicata alla proprietà corrispondente elencata in transition-property, che funge da elenco principale:

transition-property: width, background-color;
transition-duration: 2s, 0.5s; /* width animates over 2s, background over 0.5s */

Se le durate sono meno delle proprietà, l'elenco delle durate viene ripetuto finché non corrisponde all'elenco delle proprietà. Se le durate sono più delle proprietà, quelle in eccesso vengono ignorate:

/* 3 properties, 1 duration → every property uses 1s */
transition-property: width, height, color;
transition-duration: 1s;

Informazione

I prefissi vendor (come -webkit-, -moz-, -o-) non sono più necessari per i browser moderni, poiché transition-duration è completamente supportata in tutte le versioni correnti.

Valore iniziale	0s
Si applica a	Tutti gli elementi, pseudo-elementi ::before e ::after.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.transitionDuration = "3s";

Sintassi

Valori CSS transition-duration

transition-duration: time | initial | inherit;

Esempio della proprietà transition-duration:

Esempio di codice CSS transition-duration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        transition-duration: 2s;
      }
      div:hover {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Passa il cursore sul riquadro grigio: poiché transition-duration è 2s, la larghezza cresce progressivamente in due secondi invece di cambiare istantaneamente.

Esempio della proprietà transition-duration con il valore "time":

Altro esempio di codice CSS transition-duration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .example {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-duration: .3s, .3s;
      }
      .el2 {
        transition-duration: .6s, .6s;
      }
      .el3 {
        transition-duration: 1s, 1s;
      }
      .el4 {
        transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div class="container">
      <p>
        <code>transition-duration: .3s, .3s;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-duration: .6s, .6s;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-duration: 1s, 1s;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-duration: 2s, 2s;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
time	Specifica quanti secondi o millisecondi deve impiegare un effetto di transizione per completarsi. Il valore predefinito è 0s.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Eredita questa proprietà dall'elemento genitore.

Proprietà correlate

transition-duration raramente viene usata da sola. In pratica viene combinata con le altre proprietà longhand della transizione, di solito tramite la sintassi abbreviata transition:

transition-property — quali proprietà CSS vengono animate.
transition-timing-function — la curva di accelerazione (ease, linear, cubic-bezier).
transition-delay — quanto attendere prima che la transizione inizi.

Per i movimenti in più fasi che non possono essere espressi come un singolo cambiamento da A a B, utilizzare invece le animazioni CSS.

Pratica

Quale affermazione sulla proprietà transition-duration è errata?

Il suo valore predefinito è 0s.È possibile specificare una sola durata.Può essere applicata agli pseudo-elementi ::before e ::after.