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

cssselector {
  transition-property: valor;
}

Ejemplo

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

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

css#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:

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

css#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