Proprietà CSS animation-timing-function

La proprietà animation-timing-function definisce come un'animazione progredisce nel corso di ogni ciclo, non nell'intera animazione. Imposta la curva di velocità dell'animazione: il ritmo con cui l'elemento animato si sposta da un keyframe al successivo.

Questa pagina illustra il funzionamento della proprietà, tutti i valori che accetta (inclusi cubic-bezier() e steps()), come interagisce con @keyframes e con la proprietà abbreviata animation, e le insidie più comuni.

Perché la funzione di temporizzazione è importante

La durata di un'animazione indica quanto tempo impiega un ciclo; la funzione di temporizzazione indica come quel tempo viene distribuito. Con la stessa durata di 5 secondi, linear si muove a velocità costante, mentre ease parte lentamente, accelera nella parte centrale e rallenta fino a fermarsi. Scegliere la curva giusta è la differenza tra un movimento che sembra meccanico e uno che sembra naturale.

Le funzioni di temporizzazione definiscono l'interpolazione tra i keyframe. Ciò significa che è possibile impostare una funzione di temporizzazione diversa su singoli keyframe all'interno di @keyframes — la funzione si applica da quel keyframe al successivo, non all'intera animazione. Se un keyframe non ne specifica una, per quell'intervallo viene utilizzato il valore animation-timing-function dell'elemento.

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

Può assumere i seguenti valori:

• ease - (predefinito) Parte lentamente, poi accelera e termina lentamente.
• ease-in - Parte lentamente, ma accelera verso la fine.
• ease-out - Parte rapidamente, ma rallenta verso la fine.
• ease-in-out - Parte lentamente e termina lentamente.
• step-start - Equivalente a steps(1, start).
• step-end - Equivalente a steps(1, end).
• linear - L'animazione mantiene la stessa velocità per tutta la sua durata; spesso è la scelta migliore per cambiamenti di colore o opacità.
• steps(int, start|end) - Specifica una funzione a gradini con due parametri. Il primo parametro definisce il numero di intervalli nella funzione e deve essere maggiore di 0. Il secondo parametro è il valore "start" o "end" e specifica il punto in cui avviene il cambiamento di valore all'interno dell'intervallo. Se il secondo parametro è omesso, viene usato "end".
• cubic-bezier(n,n,n,n) - Specifica valori personalizzati per la funzione cubic-bezier. I primi due parametri definiscono le coordinate X e devono essere compresi tra 0 e 1. Gli ultimi due parametri definiscono le coordinate Y e possono essere qualsiasi numero.

Quando si specificano più valori separati da virgola, essi vengono associati alle corrispondenti animazioni definite in animation-name in ordine. Se le funzioni di temporizzazione sono in numero inferiore rispetto alle animazioni, l'elenco viene ripetuto per adeguarsi al conteggio.

Capire cubic-bezier()

Tutte le parole chiave con nome sono scorciatoie per una curva cubic-bezier(). La funzione accetta quattro numeri — cubic-bezier(x1, y1, x2, y2) — che rappresentano i due punti di controllo di una curva di Bézier che va da (0,0) a (1,1). L'asse X rappresenta il tempo (che deve rimanere tra 0 e 1) e l'asse Y rappresenta l'avanzamento dell'animazione (che può superare 0 o 1 per creare effetti di "rimbalzo" o "anticipazione").

Le parole chiave con nome sono equivalenti a:

• linear → cubic-bezier(0, 0, 1, 1)
• ease → cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in → cubic-bezier(0.42, 0, 1, 1)
• ease-out → cubic-bezier(0, 0, 0.58, 1)
• ease-in-out → cubic-bezier(0.42, 0, 0.58, 1)

steps() e le animazioni a gradini

Mentre cubic-bezier() produce un movimento fluido, steps() salta tra stati discreti — utile per le animazioni con sprite sheet o per il lampeggio del cursore di digitazione. steps(4, end) divide l'animazione in 4 salti uguali; start fa avvenire il primo salto immediatamente, mentre end (il valore predefinito) lo ritarda alla fine di ogni intervallo.

Insidie comuni

• Non è ereditata né animabile. Non è possibile eseguire la transizione della funzione di temporizzazione stessa.
• L'ordine è importante nella forma abbreviata. All'interno della proprietà abbreviata animation, la funzione di temporizzazione e animation-delay sono entrambi valori <time>-o-keyword; il primo <time> viene letto come durata e il secondo come ritardo, quindi è necessario inserire la funzione di temporizzazione prima del valore di ritardo.
• Le funzioni per keyframe hanno la precedenza. Una funzione di temporizzazione dichiarata su un keyframe all'interno di @keyframes sovrascrive il valore della proprietà per quel segmento.

Sintassi

Sintassi della proprietà CSS animation-timing-function

animation-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;

Esempio della proprietà animation-timing-function con il valore "ease":

Esempio della proprietà CSS animation-timing-function con il valore ease

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Esempio della proprietà animation-timing-function con il valore "ease-in":

Esempio della proprietà CSS animation-timing-function con il valore ease-in

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        animation: element 7s infinite;
        animation-timing-function: ease-in;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h1>The animation-timing-function Property</h1>
    <div></div>
  </body>
</html>

Esempio della proprietà animation-timing-function con diverse funzioni di temporizzazione:

Esempio della proprietà CSS animation-timing-function con i valori linear, ease, ease-in, ease-out ed ease-in-out

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        color: #eee;
        font-weight: bold;
        position: relative;
        text-align: center;
        padding: 8px;
        animation: mymove 5s infinite;
      }
      #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;
      }
      @keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
  </body>
</html>

Valori

Proprietà correlate

• animation — la forma abbreviata che imposta la funzione di temporizzazione insieme a nome, durata, ritardo e altro.
• @keyframes — dove si definiscono i punti di arresto dell'animazione tra cui la funzione di temporizzazione interpola.
• animation-duration — imposta la durata di un ciclo; la funzione di temporizzazione distribuisce il movimento al suo interno.
• animation-name — associa l'elemento a una regola @keyframes.
• transition-timing-function — lo stesso concetto di curva di velocità applicato alle transizioni invece delle animazioni a keyframe.

Pratica