Transições e Efeitos de Hover

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 24 de 43.

Uma transição permite que você altere uma propriedade suavemente ao longo do tempo, em vez de instantaneamente.

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

propriedade: A propriedade CSS que você deseja transicionar (ex: background-color, width, opacity).
duração: O tempo que a transição leva para ser concluída (ex: 1s para 1 segundo).

timing-function: Como a transição progride (ex: linear, ease, ease-in).
delay: Quanto tempo esperar antes de iniciar a transição (opcional).

Por exemplo:

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

Quando você passar o mouse sobre o botão, sua cor de fundo mudará de verde para azul em 0,3 segundos.

Desafio

Fácil

Adicione uma propriedade transition ao .card para que as mudanças na background color e box-shadow ocorram suavemente ao longo de 0.4 seconds com uma função de temporização ease.

Experimente você mesmo

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