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.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

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.

Folha de consulta

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;
}

property: A propriedade CSS que você deseja transicionar (ex: background-color, width, opacity)
duration: 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)

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

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>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.