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

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

• 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].

Mehrere Eigenschaften werden durch Kommas getrennt[cite: 15]. Innerhalb einer Kurzschreibweise muss die Dauer stets vor der Verzögerung stehen[cite: 15].

/* 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;
}

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

• 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].

• 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].

/* 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);
}

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

ul.container {
  perspective: 600px; /* Niedrigerer Wert = extremere Perspektive */
}
 
ul.container li {
  transform: rotateX(45deg);
}

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

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

/* 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;
}