🛞 Transiciones con CSS
Para crear una transición en CSS, sigue estos dos pasos:
- Especifica la propiedad que va a tener la transición en
transition-property
. - 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;
}
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: