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ê quer fazer a transição (por exemplo, background-color, width, opacity).
duration: O tempo que a transição leva para ser concluída (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 cursor sobre o botão, a cor de fundo dele mudará de verde para azul em 0.3 segundos.

Para fazer a transição de mais de uma propriedade, liste-as em uma declaração transition, separadas por vírgulas (uma segunda linha transition substituiria a primeira):

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

Desafio

Fácil

Adicione a propriedade transition a .card para que as mudanças na cor de fundo e em box-shadow aconteçam suavemente ao longo de 0.4 segundos, com uma função de temporização ease.

Em seguida, adicione uma regra .card:hover que altere a cor de fundo e box-shadow do cartão, para que a transição tenha algo para animar.

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>