Transiciones y efectos hover

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 24 de 43.

Una transición te permite cambiar una propiedad suavemente a lo largo del tiempo en lugar de hacerlo instantáneamente.

selector {
  transition: property duration timing-function delay;
}

property: La propiedad CSS que quieres animar mediante una transición (p. ej., background-color, width, opacity).
duration: El tiempo que tarda en completarse la transición (p. ej., 1s para 1 segundo).

timing-function: Cómo progresa la transición (p. ej., linear, ease, ease-in).
delay: Cuánto tiempo esperar antes de iniciar la transición (opcional).

Por ejemplo:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Al pasar el cursor sobre el botón, el color de fondo cambiará de verde a azul en 0.3 segundos.

Para hacer la transición de más de una propiedad, enuméralas en una sola declaración transition, separadas por comas (una segunda línea transition reemplazaría la primera):

transition: width 0.3s ease, opacity 0.3s ease;

Desafío

Fácil

Añade una propiedad transition a .card para que los cambios en el color de fondo y en box-shadow se produzcan suavemente durante 0.4 segundos con una función de temporización ease.

Después, añade una regla .card:hover que cambie el color de fondo y box-shadow de la tarjeta, para que la transición tenga algo que animar.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>