Funzione CSS steps()

Definizione e uso

CSS steps() La funzione viene utilizzata per creare funzioni di temporizzazione a passi per l'animazione.

Questa funzione divide la durata dell'animazione in intervalli di lunghezza uguale specificati (n). Ad esempio: se n è 4, l'animazione viene divisa in 4 parti. Divide la durata dall'0% al 100% in 4 parti; rispettivamente 0%-25%, 25%-50%, 50%-75% e 75%-100%

Esempio

Creare funzioni di temporizzazione a passi diversi per l'animazione:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Prova da solo

Sintassi CSS

steps(n, step-position)
Valore Descrizione
n Obbligatorio. Specificare il numero di passi/intervallo.
step-position

Opzionale. Specificare il tempo in cui si verifica il salto tra i valori. Utilizzare uno dei seguenti termini chiave:

  • jump-start o start: il primo passo si verifica all'inizio dell'animazione
  • jump-end o end: l'ultimo passo si verifica alla fine dell'animazione. end è il valore predefinito
  • jump-none: nessun salto anticipato o ritardato
  • jump-both: salti anticipati e ritardati contemporaneamente

Dettagli tecnici

Versione: CSS Easing Functions Level 1

Supporto del browser

Tabelle i numeri rappresentano la versione del browser che supporta completamente la funzione per la prima volta.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Pagine correlate

Riferimento:Proprietà animation CSS

Riferimento:Proprietà animation-timing-function CSS