transition-timing-function

Sommario

La proprietà CSS transition-timing-function è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un effetto di transizione. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.

Questa curva di accelerazione viene definita utilizzando uno <timing-function> (en-US) per ogni proprietà che ottiene una transizione.

È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in transition-property (en-US), dove in questo caso si comporta come la lista principale.

Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (ease). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.

Initial value (en-US)ease
Applies toall elements, ::before (en-US) and ::after (en-US) pseudo-elements
Inherited (en-US)no
Computed value (en-US)as specified
Animation typediscrete

Sintassi

Formal syntax: 
<easing-function># (en-US)

where
<easing-function> = linear | (en-US) <cubic-bezier-timing-function> | (en-US) <step-timing-function>

where
<cubic-bezier-timing-function> = ease | (en-US) ease-in | (en-US) ease-out | (en-US) ease-in-out | (en-US) cubic-bezier([0,1] (en-US)>, <number> (en-US), [0,1] (en-US)>, <number> (en-US))
<step-timing-function> = step-start | (en-US) step-end | (en-US) steps(<integer> (en-US)[ (en-US), <step-position>] (en-US)? (en-US))

where
<step-position> = jump-start | (en-US) jump-end | (en-US) jump-none | (en-US) jump-both | (en-US) start | (en-US) end

transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)

transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)

transition-timing-function: inherit

Valori

<timing-function>
Ciascun <timing-function> (en-US) rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in transition-property (en-US).

Esempi

transition-timing-function: ease

transition-timing-function: ease-in

transition-timing-function: ease-out

transition-timing-function: ease-in-out

transition-timing-function: linear

transition-timing-function: step-start

transition-timing-function: step-end

transition-timing-function: steps(4, end)

Specifiche

Specification Status Comment
CSS Transitions
The definition of 'transition-timing-function' in that specification.
Working Draft  

Compatibilità tra Browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes)-webkit (en-US) 4.0 (2.0)-moz (en-US)
16.0 (16.0)
10 11.6-o (en-US)
12.10 #
(Yes)-webkit (en-US)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)-webkit (en-US) (Yes)-webkit (en-US) 4.0 (2.0)-moz (en-US)
16.0 (16.0)
? ? (Yes)-webkit (en-US)

Vedi Anche