Las transiciones en CSS permiten cambiar las propiedades de un elemento de forma fluida y automática durante un periodo de tiempo especificado. Esto puede dar un efecto de “animación” al cambio de una propiedad.
Aquí te indico cómo se utilizan:
Primero, debes especificar la propiedad que deseas que cambie y el tiempo que durará el cambio. Lo haces con la propiedad `transition` de CSS.
Por ejemplo, si quisieras cambiar el color de fondo de un botón al pasar el cursor sobre él y quieres que el cambio dure medio segundo, podrías escribir algo cómo esto:
```css
button {
background-color: blue;
transition: background-color 0.5s;
}
button:hover {
background-color: red;
}
```
En este ejemplo, el color de fondo cambiará gradualmente de azul a rojo durante medio segundo cuando pasa el cursor sobre el botón.
La propiedad `transition` es una propiedad abreviada que puede descomponerse en `transition-property` (la propiedad que cambiará), `transition-duration` (cuánto tiempo durará el cambio), `transition-timing-function` (cómo se repartirá el tiempo del cambio, por ejemplo, si será uniforme, acelerará al principio, al final, etc.) y `transition-delay` (cuánto tiempo esperará antes de empezar el cambio).
Estas son todas las variantes posibles:
```css
button {
transition-property: background-color;
transition-duration: 0.5s;
transition-timing-function: linear;
transition-delay: 1s;
}
```
En este ejemplo, el cambio de color de fondo comenzará 1 segundo después de que pase el cursor sobre el botón y durará medio segundo, y la velocidad del cambio será constante (gracias a `linear`).
Por supuesto, también puede hacer cambios en varias propiedades al mismo tiempo:
```css
button {
background-color: blue;
color: white;
transition: background-color 0.5s, color 0.5s;
}
button:hover {
background-color: red;
color: black;
}
```
En este ejemplo, tanto el color de fondo como el color del texto cambiarán gradualmente durante medio segundo.
