====== LU13a - CSS Transitions (Wiederholung) ======

{{ :de:modul:m291:learningunits:lu13:theorie:transition_cards.gif?nolink | Transition Cards}}

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

===== Was ist eine Transition? =====

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.

<WRAP center round box 80%>
<code css>
.panel {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 300ms ease-in;
}

.panel.open {
    height: auto;
    opacity: 1;
}
</code>
</WRAP>

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

===== Die transition-Eigenschaft =====

<WRAP center round box 80%>
^ Eigenschaft ^ Beispielwert ^ Bedeutung ^
| ''transition-property'' | ''all'', ''opacity'', ''transform'' | Welche Eigenschaft animiert wird |
| ''transition-duration'' | ''300ms'', ''0.5s'' | Wie lange die Animation dauert |
| ''transition-timing-function'' | ''ease'', ''ease-in'', ''ease-out'', ''linear'' | Beschleunigungskurve |
| ''transition-delay'' | ''0s'', ''0.1s'' | Verzögerung vor dem Start |
</WRAP>

Kurzschreibweise:

<WRAP center round box 80%>
<code css>
/* 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;
</code>
</WRAP>


===== height: auto animieren =====

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:

<WRAP center round box 80%>
<code css>
/* In main.css, einmalig für das gesamte Projekt */
:root {
    interpolate-size: allow-keywords;
}
</code>
</WRAP>

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

<WRAP center round box 80%>
<code css>
.description {
    height: 0;
    overflow: hidden;
    transition: height 300ms ease;
}

.description.sichtbar {
    height: auto; /* jetzt animierbar! */
}
</code>
</WRAP>

===== Transition vs. @keyframes =====

<WRAP center round box 80%>
^ ^ CSS Transition ^ CSS @keyframes Animation ^
| **Auslöser** | Benötigt einen Zustandswechsel | Läuft eigenständig, kein Auslöser nötig |
| **Zustände** | Von einem Zustand zum nächsten | Beliebig viele Zwischenschritte (''0 %'' bis ''100 %'') |
| **Wiederholungen** | Nicht vorgesehen | ''infinite'', ''alternate'', beliebige Wiederholungen |
| **Geeignet für** | Hover-Effekte, Auf-/Zuklappen | Ladeanimationen, Einblend-Effekte, Dekorationen |
</WRAP>

===== Demo-Seite =====

<WRAP center round box 80%>


[[https://css-transitions-animations.vercel.app|{{ :de:modul:m291:learningunits:lu12:theorie:screenshot_2026-05-28_at_04.56.44.png?nolink&800 | Link zur Demo-Seite für Animationen}}]]
[[https://css-transitions-animations.vercel.app|Demo-Seite mit Keyframe-Animationen und Transistions]]
</WRAP>