Transitions und Animations

CSS Transitions und Animations sind mächtige Werkzeuge zur Verbesserung der Benutzererfahrung, wenn sie maßvoll und gezielt eingesetzt werden.

CSS Transitions

Definition: CSS Transitions ermöglichen es, Eigenschaftsänderungen über einen bestimmten Zeitraum zu animieren, anstatt sie abrupt zu ändern. Sie bieten eine einfache Möglichkeit, zwischen zwei Zuständen zu interpolieren.

Wichtige Eigenschaften:
• transition-property: Gibt an, welche Eigenschaften animiert werden sollen
• transition-duration: Legt die Dauer der Animation fest
• transition-timing-function: Bestimmt die Beschleunigungskurve
• transition-delay: Setzt eine Verzögerung vor Beginn der Animation

Beispiel: Button-Hover-Effekt

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

In diesem Beispiel werden beim Überfahren mit der Maus (:hover) drei Eigenschaften animiert: Hintergrundfarbe, Skalierung und Schatten. Die Animation dauert 0.3 Sekunden mit einer gleichmäßigen Beschleunigung und Verzögerung (ease-in-out).

CSS Animations

Definition: CSS Animations sind komplexer als Transitions und ermöglichen mehrstufige Animationen mit Keyframes. Sie bieten präzise Kontrolle über jeden Schritt der Animation.

Wichtige Eigenschaften:
• animation-name: Verweist auf die @keyframes-Regel
• animation-duration: Gesamtdauer der Animation
• animation-timing-function: Beschleunigungskurve
• animation-delay: Verzögerung vor Beginn
• animation-iteration-count: Wie oft die Animation wiederholt wird
• animation-direction: Richtung der Animation (normal, reverse, alternate)
• animation-fill-mode: Definiert, welche Werte vor/nach der Animation angewendet werden
• animation-play-state: Ermöglicht das Pausieren/Starten der Animation

Beispiel: Pulsierende Animation

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-element {
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-element {
  animation: pulse 2s infinite ease-in-out;
}

Diese Animation erzeugt einen Puls-Effekt, bei dem das Element auf 110% seiner Größe skaliert wird und dabei leicht durchsichtig wird, bevor es wieder in den Ausgangszustand zurückkehrt. Die Animation wiederholt sich unendlich (infinite).

Unterschiede zwischen Transitions und Animations

Beispiel: Kombination von Transition und Animation

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateY(-10px) rotate(0deg); }
  20% { transform: translateY(-10px) rotate(-3deg); }
  40% { transform: translateY(-10px) rotate(3deg); }
  60% { transform: translateY(-10px) rotate(-2deg); }
  80% { transform: translateY(-10px) rotate(2deg); }
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateY(-10px) rotate(0deg); }
  20% { transform: translateY(-10px) rotate(-3deg); }
  40% { transform: translateY(-10px) rotate(3deg); }
  60% { transform: translateY(-10px) rotate(-2deg); }
  80% { transform: translateY(-10px) rotate(2deg); }
}

In diesem Beispiel:
• Beim Hover hebt sich die Karte mit einer sanften Transition an (translateY)
• Gleichzeitig startet eine „Wackel“-Animation (shake), die die Karte leicht hin und her rotiert
• Beim Verlassen des Hovers kehrt die Karte mit der definierten Transition zurück

Best Practices

• Performance: Animieren Sie bevorzugt opacity und transform, da diese Eigenschaften vom Browser optimal gerendert werden.
• Fallbacks: Stellen Sie sicher, dass Ihre Inhalte auch ohne Animation nutzbar sind.
• Zugänglichkeit: Berücksichtigen Sie Benutzer, die Animationen reduzieren möchten (prefers-reduced-motion).
• Timing: Wählen Sie angemessene Dauer (typisch 200-500ms für Interaktionen).
• Konsistenz: Halten Sie Animationen im gesamten Projekt einheitlich.