Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
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.
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 inicial | as each of the properties of the shorthand: |
|---|---|
| Applies to | todos los elementos y los pseudoelementos ::before y ::after |
| Heredable | no |
| Media | interactive |
| Valor calculado | as each of the properties of the shorthand:
|
| Animatable | no |
| Canonical order | order 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 analizada como tiempo es asignada 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 | IDENT
Ejemplos
Hay muchos ejemplos de transiciones CSS en el artículo principal CSS transitions.
Especificaciones
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions The definition of 'transition' in that specification. |
Working Draft |
Compatibilidad de navegadores
| 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 |