transition-property

La propiedad CSS transition-property se usa para definir los nombres de las propiedades CSS en las que el efecto de la transición debe aplicarse.

/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;
Nota: El conjunto de propiedades que puede ser animado está sujeto a cambios. Por lo tanto deberías evitar incluir en la lista cualquiera de las propiedades que actualmente no puede animarse, aunque algún día pudieran, ya que podría causar resultados inesperados.

Si se especifica una propiedad abreviada (por ejemplo , background) todas sus subpropiedades que soporten animación serán animadas.

Valor inicialall
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

none
Ninguna propiedad tendrá transición.
all
Todas las propiedades que puedan tener una transición animada la tendrán.
IDENT
Una cadena que identifique la propiedad en la que el efecto de la transición debe ser aplicado cuando su valor cambie. Este identificador está compuesto por letras de la a a la z insensibles a mayúsculas, números del 0 al 9, un guión bajo (_) o un guión simple (-). El primer carácter que no sea un guión debe ser una letra (es decir: no debe haber números al principio, aunque esten precedidos de un guión). Además, no están permitidos dos guiones al principio del identificador.

Sintaxis formal

none | <single-transition-property>#

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

Ejemplos

Hay varios ejemplos de transiciones CSS incluídos en el artículo principal Transiciones CSS.

Especificaciones

Especificación Estado Comentario
CSS Transitions
La definición de 'transition-property' en esta especificación.
Working Draft Definición inicial

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
transition-propertyChrome Soporte completo 26
Soporte completo 26
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Soporte completo 16
Soporte completo 16
Soporte completo 4
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Soporte completo 10
Soporte completo 10
Soporte completo 10
Prefijado
Prefijado Requiere de un prefijo de vendedor : -ms-
Opera Soporte completo 12.1
Soporte completo 12.1
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Sin soporte 11.6 — 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -o-
Safari Soporte completo 9
Soporte completo 9
Soporte completo 3.1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo ≤37
Soporte completo ≤37
Soporte completo ≤37
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 26
Soporte completo 26
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 16
Soporte completo 16
Soporte completo 4
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 12.1
Soporte completo 12.1
Soporte completo 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Sin soporte 12 — 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -o-
Safari iOS Soporte completo 9
Soporte completo 9
Soporte completo 2
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android Soporte completo 1.5
Soporte completo 1.5
Soporte completo 1.0
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
IDENT value
Experimental
Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 16IE Soporte completo 10Opera Soporte completo SiSafari Soporte completo 4WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 16Opera Android Soporte completo SiSafari iOS Soporte completo 3Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Véase también