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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `transition-delay`: `0s`
* `transition-duration` (en-US): `0s`
* `transition-property` (en-US): all
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| Aplica-se a | all elements, `::before` and `::after` pseudo-elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `transition-delay`: as specified
* `transition-duration` (en-US): as specified
* `transition-property` (en-US): as specified
* `transition-timing-function`: as specified
* `transition-behavior` (en-US): as specified
 |
| Animation type | Not 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) , <step-position>? (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 |
| --- |
| CSS Transitions # transition-shorthand-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS transitions (en-US)
* `TransitionEvent` (en-US)