transition

Experimental: Esta é uma tecnologia experimental (en-US)
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Summary

A propriedade de CSStransition é uma propriedade abreviada para transition-property (en-US), transition-duration (en-US), transition-timing-function e transition-delay. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando pseudo-classes tais como :hover ou :active; ou dinamicamente, usando javascript.

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements, ::before and ::after pseudo-elements
Inheritednão
Computed valueas each of the properties of the shorthand:
Animation typeNot animatable

Syntax

css

/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
  margin-left 4s,
  color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

Observe que a ordem é importante dentro dos itens nesta propriedade: o primeiro valor que pode ser analisado como tempo é atribuído ao transition-duration (en-US), duration e o segundo valor que pode ser analisado como tempo é atribuído ao transition-delay.

Veja como as coisas são manipuladas quando as listas de valores de propriedades não têm o mesmo comprimento. Em resumo, descrições de transição extras além do número de propriedades realmente sendo animadas são ignoradas.

Formal syntax

transition = 
<single-transition># (en-US)

<single-transition> =
[ (en-US) none | (en-US) <single-transition-property> ] (en-US) || (en-US)
<time> || (en-US)
<easing-function> || (en-US)
<time>

<single-transition-property> =
all | (en-US)
<custom-ident> (en-US)

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

<linear-easing-function> =
linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
ease | (en-US)
ease-in | (en-US)
ease-out | (en-US)
ease-in-out | (en-US)
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
step-start | (en-US)
step-end | (en-US)
steps( <integer> (en-US) [ (en-US), <step-position> ] (en-US)? (en-US) )

<linear-stop-list> =
[ (en-US) <linear-stop> ] (en-US)# (en-US)

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

<linear-stop> =
<number> && (en-US)
<linear-stop-length>? (en-US)

<linear-stop-length> =
<percentage> (en-US){1,2} (en-US)

Examples

Existem vários outros exemplos de transições CSS incluídas no artigo principal sobre CSS transitions.

Specifications

Specification Status Comment
CSS Transitions
The definition of 'transition' in that specification.
Rascunho atual Initial definition

Compatibilidade com navegadores

BCD tables only load in the browser

See also