Übergänge & Hover-Effekte

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 24 von 43.

Eine Transition ermöglicht es dir, eine Eigenschaft im Laufe der Zeit gleichmäßig zu ändern, statt sofort.

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

Eigenschaft: Die CSS-Eigenschaft, deren Übergang du festlegen möchtest (z. B. background-color, width, opacity).
Dauer: Die Zeit, die der Übergang bis zum Abschluss benötigt (z. B. 1s für 1 Sekunde).

timing-function: Wie der Übergang abläuft (z. B. linear, ease, ease-in).
delay: Wie lange vor dem Start des Übergangs gewartet werden soll (optional).

Zum Beispiel:

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

Wenn du mit dem Mauszeiger über die Schaltfläche fährst, ändert sich ihre Hintergrundfarbe innerhalb von 0,3 Sekunden von Grün zu Blau.

Aufgabe

Einfach

Füge der .card eine transition-Eigenschaft hinzu, sodass Änderungen an der Hintergrundfarbe und am Box-Shadow innerhalb von 0.4 Sekunden mit einer ease-Timing-Funktion sanft erfolgen.

Probier es selbst

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