Propiedad transition-property

La propiedad transition-property establece la propiedad que se animará con una transición suave transition. El valor debe ser el nombre de la propiedad CSS que se animará. Si se establece el valor all (establecido por defecto), se animarán todas las propiedades a la vez.

Sintaxis

selector {
	transition-property: valor;
}

Ejemplo

Pasa el ratón sobre el bloque: cambiará suavemente su anchura, ya que transition-property tiene el valor width:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Ejemplo . Valor all

En este ejemplo, transition-property tiene el valor all, por lo que se animarán suavemente todas las propiedades escritas para el estado hover (en nuestro caso, width y height). Todos los cambios ocurrirán en el mismo tiempo, establecido en transition-duration:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

Véase también

la propiedad transition-duration,
que establece la duración de la transición suave
la propiedad transition-delay,
que establece el retraso antes de la transición suave
la propiedad transition-timing-function,
que establece la función de temporización para la transición suave
la propiedad transition,
que es la abreviatura para la transición suave
la propiedad animation,
con la que se puede crear una animación