Übergänge & Hover-Effekte

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

Eine Transition ermöglicht es Ihnen, eine Eigenschaft über einen Zeitraum hinweg flüssig zu ändern, anstatt sofort.

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

property: Die CSS-Eigenschaft, die Sie animieren möchten (z. B. background-color, width, opacity).
duration: Die Zeit, die der Übergang benötigt, um abgeschlossen zu werden (z. B. 1s für 1 Sekunde).

timing-function: Wie der Übergang fortschreitet (z. B. linear, ease, ease-in).
delay: Wie lange gewartet werden soll, bevor der Übergang beginnt (optional).

Zum Beispiel:

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

Wenn Sie mit der Maus über die Schaltfläche fahren, ändert sich deren Hintergrundfarbe innerhalb von 0,3 Sekunden von Grün zu Blau.

Aufgabe

Einfach

Füge der Klasse .card eine transition-Eigenschaft hinzu, sodass Änderungen an der background-color und dem box-shadow sanft über 0.4 Sekunden mit einer ease-Timing-Funktion 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>