Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 de transition-property, transition-duration, transition-timing-function, y transition-delay. Permite definir la transición entre dos estados de un elemento. Hay diferentes estados que pueden ser definidos utilizando pseudo-clases como :hover o :active  o aplicado dinámicamente usando JavaScript.

Valor inicialas each of the properties of the shorthand:
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Mediainteractive
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Sintaxis

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

<single-transition>#

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

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

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

where
<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>)

Ejemplos

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

Especificaciones

Specification Status Comment
CSS Transitions
La definición de 'transition' en esta especificación.
Working Draft  

Compatibilidad de navegadores

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

Véase también

Etiquetas y colaboradores del documento

Colaboradores en esta página: FedericoMarmo, fscholz, adlr, Sebastianz, yvesmh
Última actualización por: FedericoMarmo,