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 con el tiempo en lugar de hacerlo instantáneamente.

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

property: La propiedad de CSS que quieres transicionar (por ejemplo, background-color, width, opacity).
duration: El tiempo que tarda en completarse la transición (por ejemplo, 1s para 1 segundo).

timing-function: Cómo progresa la transición (por ejemplo, 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;
}

Cuando pases el cursor sobre el botón, su color de fondo cambiará de verde a azul durante 0.3 segundos.

Desafío

Fácil

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

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>