Tutorial: CSS-Animationen und Übergänge

In diesem CSS Tutorial lernst du, wie du mithilfe von CSS-Animationen und Übergängen ansprechende und dynamische Webseiten gestalten kannst. Animationen und Übergänge sind wichtige Elemente, um die User Experience (UX) einer Webseite zu verbessern und dem Nutzer Feedback zu geben.

Inhalt

1. CSS-Übergänge Tutorial

CSS-Übergänge ermöglichen es dir, Änderungen an CSS-Eigenschaften sanft und kontrolliert über eine bestimmte Dauer hinweg stattfinden zu lassen.

Grundlegender Aufbau einer CSS-Übergang

Um eine Übergang zu erstellen, benötigst du die CSS-Eigenschaft transition. Diese Eigenschaft setzt sich aus vier Teilen zusammen:

transition-property: Die CSS-Eigenschaft, auf die die Übergang angewendet wird
transition-duration: Die Dauer der Übergang
transition-timing-function: Die Art, wie die Übergang über die Zeit verläuft (z.B. linear, ease-in, ease-out, etc.)
transition-delay: Die Verzögerung, bevor die Übergang beginnt

.example {
  transition: background-color 1s ease-in-out 0s;
}

In diesem Beispiel ändert sich die Hintergrundfarbe des Elements mit der Klasse .example über eine Dauer von 1 Sekunde und mit der ease-in-out Timing-Funktion ohne Verzögerung.

Beispiel: Button-Hover-Effekt

Hier ist ein einfaches Beispiel, wie du einen Hover-Effekt mit einer CSS-Übergang erstellst:

<button class="hover-button">Hover über mich!</button>

.hover-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.hover-button:hover {
  background-color: red;
}

2. CSS-Animationen

CSS-Animationen sind leistungsfähiger als Übergänge und ermöglichen dir, komplexere Animationen mit Schlüsselbildern (Keyframes) zu erstellen.

Grundlegender Aufbau einer CSS-Animation

Um eine CSS-Animation zu erstellen, benötigst du die @keyframes-Regel, um Schlüsselbilder (Keyframes) zu definieren, und die CSS-Eigenschaft animation, um die Animation auf ein Element anzuwenden.

Beispiel: Pulsierender Button

<button class="pulse-button">Klick mich!</button>

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

.pulse-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  animation: pulse 1s infinite;
}

In diesem Beispiel haben wir eine Animation namens pulse erstellt, die den Button größer und kleiner werden lässt. Die Animation hat eine Dauer von 1 Sekunde und wiederholt sich unendlich (infinite).

Vielleicht an dieser Stelle interessant: CSS Tutorial PDF (als Download)