Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.


A propriedade de CSS  transition é uma propriedade abreviada para transition-property, transition-duration, 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
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values


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

Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay.

See how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Formal syntax


<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>

<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)


There are several more examples of CSS transitions included in the main CSS transitions article.


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

Browser compatibility

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!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit
4.0 (2.0) -moz
16.0 (16.0)
10.0 11.6 -o
12.10 #
3.0 -webkit
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)
? 10.0 -o
12.10 #
3.2 -webkit

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: hbmuller
Última atualização por: hbmuller,