Przejścia i efekty najechania

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 24 z 43.

Przejście pozwala płynnie zmieniać właściwość w czasie zamiast zmieniać ją natychmiast.

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

właściwość: Właściwość CSS, którą chcesz objąć przejściem (np. background-color, width, opacity).
czas trwania: Czas, jaki zajmuje zakończenie przejścia (np. 1s oznacza 1 sekundę).

timing-function: Jak przebiega przejście (np. linear, ease, ease-in).
delay: Jak długo czekać przed rozpoczęciem przejścia (opcjonalnie).

Na przykład:

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

Po najechaniu kursorem na przycisk jego kolor tła zmieni się z zielonego na niebieski w ciągu 0,3 sekundy.

Wyzwanie

Łatwy

Dodaj właściwość transition do .card, aby zmiany koloru tła i cienia pudełka następowały płynnie przez 0.4 sekundy z funkcją czasową ease.

Spróbuj swoich sił

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