Ü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.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

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.

Spickzettel

Eine Transition ermöglicht es Ihnen, eine Eigenschaft über einen Zeitraum hinweg fließend 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 verläuft (z. B. linear, ease, ease-in)
delay: Wie lange gewartet werden soll, bevor der Übergang beginnt (optional)

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

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.