CSS3 transition-propertyPropiedad

Soporte del navegador

Los números de la tabla indican la primera versión del navegador que admite la propiedad.

El número que precede inmediatamente a -webkit-, -ms- o -moz- es la primera versión del navegador que admite la propiedad con ese prefijo.

Definición de la propiedad e instrucciones de uso

transition-property es una propiedad de CSS3 que se utiliza para especificar a qué propiedades CSS se aplica el efecto de transición. Le permite especificar explícitamente qué propiedades se van a transicionar, de modo que cuando el estado del elemento cambie, el efecto de transición solo se aplique a las propiedades especificadas, en lugar de aplicarlo a todas las propiedades.

El valor de esta propiedad puede ser el nombre de una propiedad CSS, o la palabra clave all, que indica que el efecto de transición se aplica a todas las propiedades.

Por ejemplo, si solo desea aplicar el efecto de transición cuando cambia el color, puede escribir:

.element {
  transition-property: color;
}

De esta manera, cuando cambie el color del elemento .element, se producirá un efecto de transición.

Si desea aplicar el efecto de transición a todas las propiedades, puede usar la palabra clave all:

.element {
  transition-property: all;
}

De esta manera, no importa qué propiedad cambie, se producirá un efecto de transición.

También puede especificar varias propiedades a la vez, separadas por comas:

.element {
  transition-property: width, height, opacity;
}

De esta manera, cuando cambien el ancho, la altura o la opacidad del elemento .element, se producirá un efecto de transición.

Sintaxis

Más ejemplos

Pase el mouse sobre un elemento div para cambiar el ancho y la altura con un efecto de transición suave.