====== CSS Transitionen, Transformationen und Animationen ======

Diese Dokumentation behandelt die Grundlagen zur Erstellung von reibungslosen Übergängen (Transitions), Formveränderungen (Transforms) und komplexen Keyframe-Animationen mit CSS basierend auf den Unterlagen von Jennifer Robbins[cite: 15].

===== 1. CSS Transitionen (Übergänge) =====

CSS-Transitionen ermöglichen einen stufenlosen Übergang zwischen zwei Zuständen eines Elements durch automatische Zwischenbildberechnung (Tweening)[cite: 15].

==== Einzeleigenschaften ====
  * **transition-property:** Bestimmt die zu ändernde CSS-Eigenschaft (z. B. ''background-color'', ''all'', ''none'')[cite: 15].
  * **transition-duration:** Gibt die Dauer des Übergangs an (in Sekunden ''s'' oder Millisekunden ''ms'')[cite: 15].
  * **transition-timing-function:** Steuert den Verlauf und die Beschleunigung der Animation (z. B. ''ease'', ''linear'', ''ease-in'', ''ease-out'', ''ease-in-out'', ''cubic-bezier()'', ''steps()'')[cite: 15].
  * **transition-delay:** Legt eine Verzögerung fest, bevor der Übergang startet[cite: 15].

==== Kurzschreibweise & Mehrfachübergänge ====
Mehrere Eigenschaften werden durch Kommas getrennt[cite: 15]. Innerhalb einer Kurzschreibweise muss die Dauer stets vor der Verzögerung stehen[cite: 15].

<code css>
/* Kurzschreibweise für einzelne Eigenschaft */
.smooth {
  background-color: mediumblue;
  transition: background-color 0.3s ease-in-out 0.2s;
}

/* Mehrere Eigenschaften gleichzeitig */
.multi-smooth {
  transition: background-color 0.3s ease-out 0.2s,
              color 2s ease-in,
              letter-spacing 0.3s ease-out;
}

/* Alle Eigenschaften vereinheitlichen */
.all-smooth {
  transition: all 0.2s ease-in-out;
}
</code>

===== 2. CSS Transformationen (2D & 3D) =====

Die Eigenschaft ''transform'' verändert Form, Größe und Position eines Elements beim Rendering[cite: 15]. Sie lässt sich ideal mit Transitionen kombinieren[cite: 15].

==== Transformationsfunktionen ====
  * **rotate(deg):** Dreht das Element um den angegebenen Winkel[cite: 15].
  * **translate(x, y):** Verschiebt das Element auf der X- und Y-Achse[cite: 15].
  * **scale(x, y) / scaleX() / scaleY():** Skaliert die Größe des Elements anhand eines plattformunabhängigen Faktors[cite: 15].
  * **skew(x, y) / skewX() / skewY():** Neigt das Element entlang der Achsen um einen Gradwert[cite: 15].

==== Ursprung & Verknüpfung ====
  * **transform-origin:** Legt den Dreh- bzw. Transformationspunkt fest (z. B. ''center top'', ''100% 100%'', Pixelwerte)[cite: 15].
  * **Mehrere Transformationen:** Können hintereinander aufgelistet werden (Achtung: Die Reihenfolge beeinflusst das Ergebnis)[cite: 15].

<code css>
/* Transformation bei Hover mit weichem Übergang */
img.card {
  transition: transform 0.3s ease;
}

img.card:hover {
  transform: scale(1.1) rotate(-5deg) translate(10px, 5px);
}
</code>

==== 3D-Transformationen ====
Für 3D-Effekte wird auf dem Elternelement eine Perspektive (''perspective'') definiert und auf den Kindelementen eine 3D-Transformation angewendet[cite: 15]:

<code css>
ul.container {
  perspective: 600px; /* Niedrigerer Wert = extremere Perspektive */
}

ul.container li {
  transform: rotateX(45deg);
}
</code>

===== 3. Keyframe-Animationen =====

Keyframe-Animationen bieten die Möglichkeit, komplexe Übergänge über mehrere Zustände hinweg zu steuern[cite: 15].

==== Ablauf ====
  1. **Ablauf definieren:** Erstellen der Animation mittels ''@keyframes''-Regel und Namensvergabe[cite: 15].
  2. **Eigenschaften zuweisen:** Anwenden der Animations-Eigenschaften auf das Ziel-Element[cite: 15].

<code css>
/* 1. Definieren der Keyframe-Sequenz */
@keyframes rainbow {
  0%   { background-color: red; }
  20%  { background-color: orange; }
  40%  { background-color: yellow; }
  60%  { background-color: green; }
  80%  { background-color: blue; }
  100% { background-color: purple; }
}

/* 2. Zuweisung zum Element */
#magic {
  animation-name: rainbow;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</code>

===== 4. Übersicht der Steuerungsparameter =====

^ Bereich ^ Eigenschaft ^ Beschreibung ^
| **Transition** | ''transition-property'' | Ziel-Eigenschaften bestimmen[cite: 15] |
| | ''transition-duration'' | Zeitdauer des Übergangs[cite: 15] |
| | ''transition-timing-function'' | Beschleunigungsprofil (z. B. ''ease'', ''linear'')[cite: 15] |
| | ''transition-delay'' | Startverzögerung[cite: 15] |
| **Transform** | ''transform'' | Ausführen von ''rotate()'', ''translate()'', ''scale()'', ''skew()''[cite: 15] |
| | ''transform-origin'' | Dreh- und Ankerpunkt des Elements festlegen[cite: 15] |
| | ''perspective'' | 3D-Raumtiefe auf Elternelement aktivieren[cite: 15] |
| **Animation** | ''@keyframes'' | Regel zur Definition der Zwischenzustände (Prozentangaben)[cite: 15] |
| | ''animation-name'' | Name der zugewiesenen Keyframe-Regel[cite: 15] |
| | ''animation-iteration-count'' | Anzahl der Durchläufe (z. B. ''infinite'')[cite: 15] |
| | ''animation-direction'' | Abspielrichtung (z. B. ''normal'', ''alternate'')[cite: 15] |