Kostenlose Tutorials für Anfänger

Appearance

Kapitel 20: Übergänge ​

⏱️ Lernziel: Meistern Sie CSS-Übergänge (Transitions), um stilistische Änderungen flüssig und sanft zu gestalten.

20.1 Übergangseigenschaften ​

💡 Was sind Übergänge? ​

Übergänge ermöglichen es, dass sich CSS-Eigenschaften über eine bestimmte Zeit hinweg allmählich ändern, anstatt abrupt zu wechseln.

🎯 Grundlegende Übergangseigenschaften ​

css
/* Welche Eigenschaft soll übergangert werden? */
transition-property: width;

/* Wie lange soll der Übergang dauern? */
transition-duration: 2s;

/* Wie soll die Geschwindigkeit verlaufen? */
transition-timing-function: ease;

/* Wie lange soll gewartet werden, bevor der Übergang startet? */
transition-delay: 0.5s;

📝 Beispiel 1: Einfacher Übergang ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einfacher Übergang</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            /* Übergang für die Hintergrundfarbe */
            transition-property: background-color;
            transition-duration: 1s;
        }
        
        .box:hover {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Erklärung:

  • Wenn Sie die Maus über die Box bewegen, ändert sich die Farbe von rot zu blau über 1 Sekunde
  • transition-property: background-color - Legt fest, dass sich die Hintergrundfarbe ändern soll
  • transition-duration: 1s - Legt fest, dass der Übergang 1 Sekunde dauern soll

20.2 Übergangs-Kurzschreibweise ​

🎯 Die transition-Eigenschaft ​

Sie können alle Übergangseigenschaften in einer einzigen Eigenschaft zusammenfassen:

css
/* Kurzschreibweise */
transition: background-color 1s ease 0s;

/* Noch kürzer (nur Eigenschaft und Dauer sind erforderlich) */
transition: background-color 1s;

📝 Beispiel 2: Übergang mit Kurzschreibweise ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Übergang mit Kurzschreibweise</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            /* Alle Eigenschaften, die sich ändern, über 1 Sekunde */
            transition: all 1s ease;
        }
        
        .box:hover {
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Erklärung:

  • transition: all 1s ease - Alle Eigenschaften, die sich ändern, werden über 1 Sekunde mit einer "ease"-Kurve übergangert
  • all bedeutet: Alle Eigenschaften, die sich ändern (Hintergrundfarbe, Breite, Höhe)

20.3 Häufige Übergangsszenarien ​

🎯 Szenario 1: Maus-Hover-Effekt ​

css
.button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    border: none;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #45a049;
}

🎯 Szenario 2: Schaltflächen-Klick-Effekt ​

css
.button {
    background-color: #008CBA;
    color: white;
    padding: 15px 32px;
    border: none;
    transition: transform 0.1s ease;
}

.button:active {
    transform: scale(0.95); /* Verkleinert die Schaltfläche leicht beim Klicken */
}

🎯 Szenario 3: Element anzeigen/verbergen ​

css
.element {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.element.show {
    opacity: 1;
}

20.4 Neueinsteiger-Falle: Übergänge funktionieren nur bei "änderbaren Eigenschaften" ​

⚠️ Wichtige Einschränkung ​

Übergänge funktionieren nur bei Eigenschaften, die numerische Werte haben oder sich schrittweise ändern können.

✅ Funktioniert:

  • width, height (numerische Werte)
  • background-color, color (Farbwerte)
  • opacity (numerische Werte)
  • transform (numerische Werte)

❌ Funktioniert nicht:

  • display: none zu display: block (kein Übergang möglich)
  • font-family (kein Übergang möglich)

🎯 Lösung für display-Problem ​

Wenn Sie ein Element einblenden möchten, verwenden Sie opacity und visibility statt display:

css
.element {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.element.show {
    opacity: 1;
    visibility: visible;
}

20.5 Praxis: Hover-Buttons, sanft skalierende Elemente ​

🎨 Praxis 1: Schaltfläche mit Hover-Farbeffekt ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Hover-Button</title>
    <style>
        .hover-button {
            background-color: #4CAF50;
            color: white;
            padding: 15px 32px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            /* Übergang für Hintergrundfarbe und Schatten */
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        .hover-button:hover {
            background-color: #45a049;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <button class="hover-button">Maus hier rüberbewegen</button>
</body>
</html>

🎨 Praxis 2: Sanft skalierendes Element ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Skalierendes Element</title>
    <style>
        .scale-box {
            width: 100px;
            height: 100px;
            background-color: #008CBA;
            transition: transform 0.3s ease;
        }
        
        .scale-box:hover {
            transform: scale(1.2); /* Vergrößert das Element um 20% */
        }
    </style>
</head>
<body>
    <div class="scale-box"></div>
</body>
</html>

🎨 Praxis 3: Sanft gleitendes Element ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Gleitendes Element</title>
    <style>
        .slide-box {
            width: 100px;
            height: 100px;
            background-color: #f44336;
            transition: transform 0.5s ease;
        }
        
        .slide-box:hover {
            transform: translateX(100px); /* Bewegt das Element 100px nach rechts */
        }
    </style>
</head>
<body>
    <div class="slide-box"></div>
</body>
</html>

✅ Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  1. ✅ Übergangseigenschaften - transition-property, transition-duration, transition-timing-function
  2. ✅ Kurzschreibweise - transition Eigenschaft
  3. ✅ Häufige Szenarien - Hover-Effekte, Klick-Effekte, Einblenden/Verbergen
  4. ✅ Einschränkungen - Übergänge funktionieren nur bei änderbaren Eigenschaften
  5. ✅ Praxis - Hover-Schaltflächen, skalierende Elemente

🎯 Übung ​

Übung 1: Erstellen Sie eine Schaltfläche, die beim Darüberfahren die Hintergrundfarbe ändert.

Übung 2: Erstellen Sie eine Box, die beim Darüberfahren größer wird.

Übung 3: Erstellen Sie ein Element, das beim Darüberfahren nach rechts gleitet.

📚 Nächstes Kapitel ​

Im nächsten Kapitel lernen wir Animationen (Animations), um komplexe dynamische Effekte zu erstellen.

[Weiter zu Kapitel 21: Animationen →]

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials