Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
Summary
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 value | as each of the properties of the shorthand: |
|---|---|
| Aplica-se a | all elements, ::before and ::after pseudo-elements |
| Inherited | não |
| Midia | interactive |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | não |
| Canonical order | order of appearance in the formal grammar of the values |
Syntax
/* 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>#where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>where
<single-transition-property> = all | IDENT
Examples
There are several more examples of CSS transitions included in the main CSS transitions article.
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions The definition of 'transition' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 -webkit 26.0 |
4.0 (2.0) -moz 16.0 (16.0) |
10.0 | 11.6 -o 12.10 # |
3.0 -webkit 6.1 |
| 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 |