Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
transition-property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since septiembre de 2015.
La propiedad CSStransition-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:Elconjunto 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 inicial | all |
|---|---|
| Applies to | todos los elementos y lospseudoelementos::before y::after |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |
Sintaxis
Valores
noneNinguna propiedad tendrá transición.
allTodas las propiedades que puedan tener una transición animada la tendrán.
IDENTUna 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
aa lazinsensibles a mayúsculas, números del0al9, 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
transition-property =
none|
<single-transition-property>#
<single-transition-property> =
all|
<custom-ident>
Ejemplos
Hay varios ejemplos de transiciones CSS incluídos en el artículo principalTransiciones CSS.
Especificaciones
| Specification |
|---|
| CSS Transitions Module Level 1 # transition-property-property |