Animationen in CSS: Wie man eine Website ohne JavaScript „lebendig“ macht

Animationen machen die Website für die Benutzer dynamisch. Viele glauben, dass dafür unbedingt JavaScript erforderlich ist, aber modernes CSS ermöglicht es, komplexe Effekte ohne eine einzige Zeile JS-Code zu erstellen. Die Verwendung von CSS-Animationen beschleunigt das Laden der Seite und verringert die Belastung des Browsers, da sie hardwarebeschleunigt sind.

Grundlagen von CSS-Animationen

Um eine Animation zu erstellen, müssen Schlüsselbilder mit @keyframes definiert werden. Zum Beispiel erstellen wir einen sanften Farbwechsel für einen Button:

@keyframes changeColor {
  0% { background-color: #3498db; }
  100% { background-color: #2ecc71; }
}

button {
  animation: changeColor 2s infinite alternate;
}

Dieser Code lässt den Button alle 2 Sekunden die Farbe wechseln. Die Animation läuft kontinuierlich dank infinite, und alternate lässt sie die Richtung bei jedem Durchlauf ändern.

Animation der Bewegung von Objekten

Ein sehr verbreiteter Effekt ist die sanfte Bewegung eines Elements. Zum Beispiel erstellen wir einen Block, der sich hin und her bewegt:

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.moving-block {
  animation: move 3s infinite;
}

Dieser Effekt kann auf verschiedene Elemente angewendet werden, um der Seite Dynamik zu verleihen.

CSS-Transition: sanfte Stiländerungen

Wenn Sie Eigenschaften ohne @keyframes animieren möchten, können Sie transition verwenden. Zum Beispiel erstellen wir einen Hover-Effekt für einen Button:

button {
  background-color: #3498db;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #2ecc71;
}

Dieser Ansatz ermöglicht es, den Farbwechsel angenehmer und ohne Ruckeln zu gestalten.

Kombination von Effekten

Um komplexere Effekte zu erzielen, können @keyframes und transition kombiniert werden. Zum Beispiel erstellen wir einen „Pulse“-Effekt:

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

.pulsing-button {
  animation: pulse 1.5s infinite;
}

So ermöglichen CSS-Animationen die Erstellung dynamischer und sanfter Effekte, ohne dass JavaScript verwendet werden muss.