transition
==========

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Sumario
-------

La propiedad `transition` es una propiedad abreviada (en-US) de `transition-property`, `transition-duration`, `transition-timing-function` (en-US), y `transition-delay`. Permite definir la transición entre dos estados de un elemento. Hay diferentes estados que pueden ser definidos utilizando pseudo-clases (en-US) como `:hover` o `:active` o aplicado dinámicamente usando JavaScript.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `transition-delay`: `0s`
* `transition-duration`: `0s`
* `transition-property`: all
* `transition-timing-function` (en-US): `ease`
* `transition-behavior` (en-US): `normal`
 |
| Applies to | todos los elementos y los pseudoelementos `::before` y `::after` |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `transition-delay`: como se especifica
* `transition-duration`: como se especifica
* `transition-property`: como se especifica
* `transition-timing-function` (en-US): como se especifica
* `transition-behavior` (en-US): como se especifica
 |
| Animation type | Not animatable |

Sintaxis
--------


```css
/\* Aplicar a 1 propiedad \*/
/\* nombre de la propiedad | duración \*/
transition: margin-left 4s;

/\* nombre de la propiedad | duración | retardo \*/
transition: margin-left 4s 1s;

/\* nombre de la propiedad | duración | función | retardo \*/
transition: margin-left 4s ease-in-out 1s;

/\* Aplicar a 2 propiedades \*/
transition:
  margin-left 4s,
  color 1s;

/\* Aplicar a todas las propiedades que cambien \*/
transition: all 0.5s ease-out;
```


Nótese que el orden es importante dentro de los elementos de la propiedad. El primer valor que puede ser analizado como tiempo es asignado a la propiedad transition-duration (en-US), y el segundo valor que puede ser analizado como tiempo es asignado a la propiedad transition-delay.

Véase cuando la lista de valores de propiedades son de diferentes tamaños para más detalles de cómo se manejan las cosas cuando la lista de valores de propiedades no son de tamaños iguales. En resumen, las descripciones extras más allá del número de propiedades que son animadas son ignoradas.

### Sintaxis formal
```

transition =   
  <single-transition>#    
  
<single-transition> =   
  [ none | <single-transition-property> ]  ||  
  <time>                                   ||  
  <easing-function>                        ||  
  <time>                                     
  
<single-transition-property> =   
  all             |  
  <custom-ident> (en-US)    
  
<easing-function> =   
  linear                          |  
  <linear-easing-function>        |  
  <cubic-bezier-easing-function>  |  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                |  
  ease-in                                             |  
  ease-out                                            |  
  ease-in-out                                         |  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             |  
  step-end                               |  
  steps( <integer> , <step-position>? )    
  
<linear-stop-list> =   
  [ <linear-stop> ]#    
  
<step-position> =   
  jump-start  |  
  jump-end    |  
  jump-none   |  
  jump-both   |  
  start       |  
  end           
  
<linear-stop> =   
  <number>               &&  
  <linear-stop-length>?    
  
<linear-stop-length> =   
  <percentage>{1,2}    
  
```

Ejemplos
--------

Hay muchos ejemplos de transiciones CSS en el artículo principal CSS transitions.

Especificaciones
----------------

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* Usando transiciones CSS (en-US)
* `TransitionEvent` (en-US)