transition

A propriedade de CSS  transition é 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.

/* 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.

<single-transition># (en-US)
where 
<single-transition> = [ (en-US) none | (en-US) <single-transition-property> ] (en-US) || (en-US) <time> || (en-US) <easing-function> || (en-US) <time>
where 
<single-transition-property> = all | (en-US) <custom-ident> (en-US)
<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>, [0,1] (en-US)>, <number>)
<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

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

• Using CSS transitions
• TransitionEvent (en-US)