Proprietà CSS transition-timing-function

La proprietà CSS transition-timing-function specifica la curva di velocità di una transizione — ovvero come vengono calcolati i valori intermedi nel corso della durata della transizione. Non cambia quanto tempo dura una transizione (questo è compito di transition-duration); controlla invece il ritmo durante il percorso.

Perché è importante? Una transizione che scorre a velocità perfettamente costante (linear) spesso appare meccanica. Il movimento nel mondo reale accelera e decelera, quindi la curva predefinita ease — avvio lento, parte centrale veloce, conclusione lenta — risulta molto più naturale all'occhio. Scegliere la giusta funzione di temporizzazione è ciò che distingue un'animazione UI rifinita da una rigida.

La proprietà transition-timing-function è una delle proprietà CSS3.

Questa pagina tratta i valori con parole chiave, le potenti funzioni cubic-bezier() e steps(), come impostare una curva diversa per ogni proprietà e le insidie più comuni.

Valori con parole chiave

La proprietà accetta queste curve denominate:

ease — avvio lento, veloce, fine lenta (il valore predefinito)
linear — velocità costante dall'inizio alla fine
ease-in — avvio lento, accelera verso la fine
ease-out — avvio veloce, rallenta verso la fine
ease-in-out — avvio lento e fine lenta, più veloce nel mezzo
step-start — salta immediatamente al valore finale (senza valori intermedi)
step-end — mantiene il valore iniziale, poi salta alla fine

Ogni parola chiave è semplicemente un'abbreviazione per una definizione cubic-bezier() o steps() sottostante — ad esempio, linear equivale a cubic-bezier(0, 0, 1, 1) e ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1).

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

Sintassi

Valori CSS transition-timing-function

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

Quando un valore viene omesso, il browser utilizza il valore iniziale ease.

Esempio di transition-timing-function

Nell'esempio seguente due proprietà vengono animate insieme. La prima funzione di temporizzazione si applica alla prima transition-property (background-color), e la seconda si applica a left. La curva cubic-bezier() qui supera intenzionalmente 1 in modo che il box rimbalzi leggermente oltre il suo obiettivo — qualcosa che nessuno dei valori con parole chiave può fare.

Esempio di codice CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        padding: 2em;
        width: 40px;
        height: 40px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
        left: 450px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <p>Hover over the element to see the effect</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio di transition-timing-function con i valori "ease", "linear", "ease-in" e "ease-out"

Esempio di codice con valori CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: ease;
      }
      .el2 {
        transition-timing-function: linear;
      }
      .el3 {
        transition-timing-function: ease-in;
      }
      .el4 {
        transition-timing-function: ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Passa il cursore sul contenitore e osserva i quattro cerchi correre: linear mantiene un ritmo costante, ease-in è in ritardo poi recupera, e ease-out scatta in avanti poi si assesta.

Esempio di transition-timing-function con i valori "step-start" e "step-end"

Altro esempio CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: step-start;
      }
      .el2 {
        transition-timing-function: step-end;
      }
    </style>
  </head>
  <body>
    <h2> Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

La funzione cubic-bezier()

Ogni curva con parola chiave è basata su una curva di Bézier cubica, e cubic-bezier(x1, y1, x2, y2) ti permette di definirne una personalizzata. I quattro numeri sono le coordinate di due punti di controllo; il punto iniziale (0, 0) e il punto finale (1, 1) sono fissi.

/* a gentle ease-out */
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

/* an overshoot/"bounce" — the y values can go below 0 or above 1 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

I valori x (x1, x2) devono rimanere nell'intervallo 0–1, ma i valori y possono superarlo — è esattamente così che si crea un effetto di rimbalzo o di anticipazione. Questo è il valore più flessibile ed è utile quando le parole chiave sembrano troppo generiche.

La funzione steps()

steps(n, position) fa avanzare la transizione a n passi discreti invece di scorrere in modo fluido — utile per animazioni con sprite-sheet, effetti macchina da scrivere, o qualsiasi cosa che debba "scattare" invece di scorrere.

/* 4 equal jumps */
transition-timing-function: steps(4, end);

Il secondo argomento opzionale stabilisce se il salto avviene all'inizio o alla fine di ogni intervallo (il valore predefinito è end). Le parole chiave step-start e step-end sono semplicemente steps(1, start) e steps(1, end).

Impostare una curva per ogni proprietà

Quando si transizionano più proprietà contemporaneamente, è possibile fornire un elenco separato da virgole di funzioni di temporizzazione. Ognuna si allinea con la voce corrispondente in transition-property:

transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s;
transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.27, 1.55);

Se si forniscono meno funzioni di temporizzazione che proprietà, l'elenco viene ripetuto; se se ne forniscono di più, quelle in eccesso vengono ignorate.

Insidie comuni

Regola solo il ritmo, non il tempo. Una curva dall'aspetto più scattante non termina prima — per questo bisogna cambiare transition-duration.
x deve rimanere in [0, 1]. In cubic-bezier() un valore x fuori intervallo rende l'intera dichiarazione non valida e il browser torna a ease.
L'ordine conta negli elenchi. L'N-esima funzione di temporizzazione si associa all'N-esima transition-property, non a un nome — mantenere gli elenchi allineati.
Preferire la sintassi abbreviata transition per il codice in produzione; le proprietà estese mostrate qui servono principalmente per chiarezza.

Valori

Valore	Descrizione
ease	L'effetto di transizione inizia lentamente, poi diventa più veloce e termina lentamente. Questo è il valore predefinito.
linear	L'effetto di transizione procede a velocità costante dall'inizio alla fine.
ease-in	L'effetto di transizione inizia lentamente e accelera verso la fine.
ease-out	L'effetto di transizione inizia rapidamente, ma rallenta alla fine.
ease-in-out	L'effetto di transizione inizia lentamente e termina lentamente.
step-start	Equivalente a `steps(1, start)`.
step-end	Equivalente a `steps(1, end)`.
steps(int,start\|end)	Specifica una funzione a gradini con due parametri. Il primo parametro specifica il numero di intervalli nella funzione. Deve essere maggiore di 0. Il secondo parametro è il valore "start" o "end", e specifica il punto in cui avviene il cambiamento di valori all'interno dell'intervallo. Se il secondo parametro non viene specificato, viene usato il valore "end".
cubic-bezier (n,n,n,n)	Specifica una curva di Bézier cubica per definire l'accelerazione e la decelerazione della transizione.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Esercizio

Pratica

La proprietà CSS transition-timing-function accetta i seguenti valori, tranne

ease-in-outstep-endpausedlinear