Atributo transition-property de CSS

Definición y uso

La propiedad transition-property especifica el nombre de la propiedad CSS que aplica el efecto de transición. (El efecto de transición comenzará cuando cambie la propiedad CSS especificada).

Consejo:El efecto de transición generalmente ocurre cuando el usuario coloca el puntero del ratón sobre el elemento.

Notas:Siempre configure duración de transición Si no se especifica la propiedad, no se producirá el efecto de transición si el tiempo de duración es 0.

Véase también:

Tutoriales de CSS:Transiciones CSS

Manual de referencia HTML DOM:Propiedad transitionProperty

Ejemplo

Coloca el puntero del ratón sobre el elemento div y se producirá un efecto de transición suave que cambia el ancho del elemento:

div {
  transition-property: ancho;
}

Prueba tu mismo

Sintaxis de CSS

transition-property: none|all|propiedad;

Valor de propiedad

Valor Descripción
ninguno Ninguna propiedad recibirá el efecto de transición.
todos Todas las propiedades recibirán el efecto de transición.
propiedad Define una lista de nombres de propiedades CSS que aplican el efecto de transición, separados por comas.

Detalles técnicos

Valor predeterminado: todos
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: objeto.style.transitionProperty="ancho,alto"

Compatibilidad del navegador

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

Los números con prefijos -webkit-, -moz- o -o- indican la primera versión que utiliza el prefijo.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-