Transiciones con CSS

Para crear una transición en CSS, sigue estos dos pasos:

1. Especifica la propiedad que va a tener la transición en transition-property.
2. Coloca la duración de la transición en milisegundos en transition-duration.

Por ejemplo, para cambiar el color del background-color a una clase llamada card, debemos hacerlo de la siguiente manera:

.card {
  transition-property: background-color;
  transition-duration: 500ms;
}

.card:hover {
  background-color: darkgrey;
}

:::note[Nota] Si deseas especificar más de una propiedad, deberás ponerlas dentro de transition-property separadas por comas. Por ejemplo, si además de cambiar el background-color quieres cambiar el width y height deberás hacerlo de la siguiente manera:

.card {
  transition-property: background-color, width, height;
  transition-duration: 500ms;
}
.card:hover {
  // nuevos valores de card cuando se haga hover sobre el card.
  background-color: darkgrey;
  width: 200px;
  height: 200px;
}

:::

Explicación en video:

También existe la propiedad transition-timing-function que te permite especificar la curvatura de la transición. Esta propiedad te la explico a detalle en el siguiente video: