Transições e Efeitos de Hover

Parte da seção Domínio do CSS do Journey de HTML da Coddy. Lição 24 de 43.

Uma transição permite alterar uma propriedade suavemente ao longo do tempo, em vez de instantaneamente.

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

property: A propriedade CSS que você deseja transicionar (por exemplo, background-color, width, opacity).
duration: O tempo necessário para concluir a transição (por exemplo, 1s para 1 segundo).

timing-function: Como a transição progride (por exemplo, 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, a cor de fundo dele mudará de verde para azul ao longo de 0,3 segundo.

Desafio

Fácil

Adicione uma propriedade transition ao .card para que as alterações na cor de fundo e na sombra da caixa ocorram suavemente ao longo de 0.4 segundos 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>