Attributo animationTimingFunction dello stile

Definizione e uso

animationTimingFunction Definisci la curva di velocità dell'animazione.

La curva di velocità definisce il tempo necessario per un'animazione per passare da uno stile CSS a un altro.

La curva di velocità viene utilizzata per cambiamenti fluidi.

Esempio

Cambia l'attributo animationTimingFunction dell'elemento <div>:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

Prova personalmente

Sintassi

Restituisci l'attributo animationTimingFunction:

oggetto.style.animationTimingFunction

Imposta l'attributo animationTimingFunction:

oggetto.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

Valore dell'attributo

Valore Descrizione
linear La velocità dell'animazione è la stessa da inizio a fine.
ease Valore predefinito. L'animazione inizia lentamente, poi si accelera, poi finisce lentamente.
ease-in L'animazione inizia lentamente.
ease-out L'animazione termina lentamente.
ease-in-out L'animazione ha un inizio e una fine lenti.
cubic-bezier(n, n, n, n)

Definisci i tuoi valori personalizzati nella funzione Bezier a tre punti.

I valori possibili sono numeri da 0 a 1.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Erede questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: ease
Valore di ritorno: Stringa che rappresenta l'elemento Proprietà animation-timing-function.
Versione CSS: CSS3

Supporto del browser

animationTimingFunction È una funzionalità CSS3 (1999).

Tutti i browser lo supportano completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Supporto Supporto Supporto Supporto Supporto 11

Pagina correlata

Manuale di riferimento CSS:Proprietà animation-timing-function