CSS Transitions (Wiederholung)

CSS Transitions kennen Sie bereits aus früheren Lerneinheiten. Diese Seite fasst das Wichtigste zusammen.

Eine Transition animiert den Wechsel einer CSS-Eigenschaft von einem Zustand in einen anderen. Sie benötigt immer einen Auslöser – zum Beispiel einen Hover-Effekt oder das Hinzufügen einer CSS-Klasse per JavaScript.

.panel {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 300ms ease-in;
}
 
.panel.open {
    height: auto;
    opacity: 1;
}

Sobald die Klasse open per JavaScript hinzugefügt oder entfernt wird, animiert der Browser den Übergang automatisch.

Kurzschreibweise:

/* transition: Eigenschaft Dauer Easing Delay */
transition: opacity 300ms ease-in 0s;
 
/* Mehrere Eigenschaften mit Komma trennen */
transition: opacity 300ms ease, transform 300ms ease;
 
/* all animiert alle veränderten Eigenschaften gleichzeitig */
transition: all 300ms ease-in;

CSS kann normalerweise nicht von einer fixen Höhe zu height: auto animieren, weil auto kein numerischer Wert ist. Mit einer zusätzlichen CSS-Zeile auf :root können wir heute korrekt animieren:

/* In main.css, einmalig für das gesamte Projekt */
:root {
    interpolate-size: allow-keywords;
}

Danach funktioniert die Transition auf height: auto in modernen Browsern direkt:

.description {
    height: 0;
    overflow: hidden;
    transition: height 300ms ease;
}
 
.description.sichtbar {
    height: auto; /* jetzt animierbar! */
}

Auf der nächsten Seite lernen Sie CSS Nesting kennen – eine Syntax, die Ihren CSS-Code übersichtlicher macht und in den Aufgaben 3 und 4 durchgehend verwendet wird.