Transizioni ed effetti al passaggio del mouse

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 24 di 43.

Una transizione ti permette di modificare una proprietà gradualmente nel tempo invece che all'istante.

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

property: La proprietà CSS che vuoi animare con una transizione (ad es. background-color, width, opacity).
duration: Il tempo necessario per completare la transizione (ad es. 1s per 1 secondo).

timing-function: Come procede la transizione (ad es. linear, ease, ease-in).
delay: Quanto tempo attendere prima di avviare la transizione (facoltativo).

Per esempio:

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

Quando passi il cursore sul pulsante, il colore dello sfondo passerà dal verde al blu in 0,3 secondi.

Sfida

Facile

Aggiungi una proprietà transition a .card in modo che le modifiche al colore di sfondo e a box-shadow avvengano gradualmente in 0.4 secondi con una funzione di temporizzazione ease.

Provalo tu

<!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>