Funzione di temporizzazione della transizione - Trucchi CSS

La transition-timing-functionproprietà, normalmente utilizzata come parte della transitionstenografia, viene utilizzata per definire una funzione che descrive come procederà una transizione nella sua durata, consentendo a una transizione di cambiare velocità durante il suo corso.

.example ( transition-timing-function: ease-out; )

Queste funzioni di temporizzazione sono comunemente chiamate funzioni di andamento e possono essere definite utilizzando un valore di parola chiave predefinito, una funzione di avanzamento o una curva di Bézier cubica.

I valori delle parole chiave predefinite consentiti sono:

facilità
lineare
facilità
facilità
facilità in uscita
inizio passo
step-end

Per alcuni valori, l'effetto potrebbe non essere così evidente a meno che la durata della transizione non sia impostata su un valore maggiore.

Ciascuna delle parole chiave predefinite ha un valore cubico equivalente della curva di Bézier o un valore equivalente della funzione stepping. Ad esempio, i seguenti due valori della funzione di temporizzazione sarebbero equivalenti tra loro:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Come i seguenti due:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Utilizzo dei passaggi () e delle curve di Bézier

La steps()funzione consente di specificare gli intervalli per la funzione di temporizzazione. Accetta uno o due parametri, separati da una virgola: un numero intero positivo e un valore opzionale di starto end. Se non viene incluso alcun secondo parametro, verrà impostato automaticamente su end.

Per comprendere le funzioni di stepping, ecco una demo che utilizza steps(4, start)per il riquadro a sinistra e steps(4, end)per il riquadro a destra (passa il mouse su un riquadro o ricarica il frame per visualizzare le transizioni):

Dai un'occhiata a questa penna!

Quando startè specificato, la modifica dei valori avviene all'inizio di ogni intervallo, mentre endfa sì che la modifica dei valori avvenga alla fine di ogni intervallo.

Uno sguardo dettagliato ai valori della curva di Bézier va oltre lo scopo di questo riferimento, tuttavia vedere i riferimenti nella sezione dei collegamenti correlati per gli strumenti che dimostrano visivamente come funzionano questi valori.

Per la compatibilità con tutti i browser supportati, sono richiesti i prefissi del fornitore, con la sintassi standard dichiarata per ultima:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (la prima versione stabile di IE da supportare transition-timing-function) non richiede il -ms-prefisso.