css mit Adi Prinz

Der grundlegende Unterschied

Eine Transition verbindet zwei Zustände miteinander. Sie benötigt deshalb eine Zustandsänderung, die beispielsweise durch :hover, :focus-visible oder eine zusätzliche CSS-Klasse ausgelöst wird.

Eine Animation verwendet dagegen eine @keyframes-Regel. Sie kann mehrere Zwischenschritte enthalten, automatisch starten und beliebig oft wiederholt werden.

Aktives Beispiel mit transition

Bewege den Mauszeiger über den Button. Du kannst ihn auch mit der Tab-Taste auswählen. Dabei verändern sich Hintergrundfarbe, Schatten und Position.

.transition-button {
  padding: 12px 24px;
  color: #fff;
  background-color: #444;
  border: 0;
  border-radius: 5px;
  transform: translateY(0);

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.transition-button:hover,
.transition-button:focus-visible {
  background-color: #6f42c1;
  box-shadow: 0 8px 16px rgb(0 0 0 / 30%);
  transform: translateY(-5px);
}

Sobald der Mauszeiger oder Tastaturfokus den Button wieder verlässt, läuft die Transition automatisch zurück zum Ausgangszustand.

Aktives Beispiel mit animation

Die folgende Ladeanzeige beginnt automatisch mit der Drehung. Sie benötigt weder einen Mauszeiger noch einen anderen Auslöser.

@keyframes spinner-drehen {
  to {
    transform: rotate(360deg);
  }
}

.animation-spinner {
  width: 60px;
  height: 60px;
  border: 7px solid #ccc;
  border-top-color: #6f42c1;
  border-radius: 50%;

  animation: spinner-drehen 1s linear infinite;
}

Die Animation startet automatisch und wird durch den Wert infinite unbegrenzt wiederholt.

Wann eignet sich eine Transition?

Eine Transition eignet sich besonders für einfache Zustandsänderungen:

• Farbwechsel bei Buttons und Links
• Veränderungen bei :hover und :focus-visible
• Öffnen und Schließen von Navigationen
• Ein- und Ausblenden von Hinweisen
• Verschieben oder Vergrößern von Karten
• Änderungen durch hinzugefügte CSS-Klassen

Besteht der Effekt nur aus einem Ausgangs- und einem Zielzustand, ist eine Transition meistens die einfachere Lösung.

Wann eignet sich eine Animation?

Eine Animation eignet sich für komplexere oder automatisch ablaufende Effekte:

• Animationen mit mehreren Zwischenschritten
• automatisch startende Einblendungen
• wiederholte Bewegungen
• Ladeanzeigen und Fortschrittsdarstellungen
• Pulsieren, Drehen oder Schweben von Elementen
• zeitlich aufeinander abgestimmte Abläufe

Werden mehrere Keyframes, Wiederholungen oder unterschiedliche Abspielrichtungen benötigt, ist eine CSS-Animation besser geeignet.

Die passende Technik auswählen

Vor der Umsetzung kann die Auswahl mit zwei einfachen Fragen getroffen werden:

1. Soll lediglich weich zwischen zwei Zuständen gewechselt werden? Dann eignet sich transition.
2. Soll der Effekt mehrere Schritte durchlaufen, automatisch starten oder wiederholt werden? Dann eignet sich animation.

Transition und Animation können auf derselben Webseite verwendet werden. Sie sollten jedoch nicht gleichzeitig dieselbe CSS-Eigenschaft desselben Elements steuern, da sonst unerwartete Ergebnisse entstehen können.

Farbe und Schatten weich verändern

Bewege den Mauszeiger über den Button oder wähle ihn mit der Tab-Taste aus. Hintergrundfarbe und Schatten verändern sich weich.

.animated-button {
  padding: 12px 24px;
  color: #fff;
  background-color: #444;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  cursor: pointer;

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.animated-button:hover,
.animated-button:focus-visible {
  background-color: #6f42c1;
  box-shadow: 0 7px 16px rgb(0 0 0 / 30%);
}

Der Button verändert nur seine Darstellung. Seine Größe und damit das Seitenlayout bleiben unverändert.

Button leicht anheben

Mit transform: translateY() kann der Button optisch angehoben werden, ohne andere Elemente zu verschieben.

.lift-button {
  padding: 12px 24px;
  color: #fff;
  background-color: #6f42c1;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transform: translateY(0);

  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.lift-button:hover,
.lift-button:focus-visible {
  box-shadow: 0 9px 18px rgb(0 0 0 / 30%);
  transform: translateY(-6px);
}

.lift-button:active {
  transform: translateY(-1px);
}

Beim Anklicken wird der Button wieder etwas abgesenkt. Dadurch entsteht eine sichtbare Rückmeldung auf die Betätigung.

Für eine kleine optische Verschiebung ist transform besser geeignet als eine Änderung von margin oder top.

Button leicht vergrößern

Mit scale() wird der Button beim Berühren oder Fokussieren geringfügig vergrößert.

.scale-button {
  padding: 12px 24px;
  color: #fff;
  background-color: #b8860b;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transform: scale(1);

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.scale-button:hover,
.scale-button:focus-visible {
  background-color: #8b6508;
  transform: scale(1.08);
}

.scale-button:active {
  transform: scale(0.98);
}

Eine geringe Vergrößerung wirkt ruhiger als eine starke Größenänderung. Durch transform wird kein neuer Platz im Layout benötigt.

Aufmerksamkeit durch Pulsieren erzeugen

Dieser Button verwendet eine kurze @keyframes-Animation. Sie wird beim Berühren mit der Maus oder beim Tastaturfokus einmal abgespielt.

@keyframes button-pulsieren {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.pulse-button:hover,
.pulse-button:focus-visible {
  animation: button-pulsieren 0.5s ease-in-out;
}

Ein dauerhaft pulsierender Button kann stark ablenken. Eine kurze, gezielt ausgelöste Animation ist für Bedienelemente meistens besser geeignet.

Schimmer über einen Button bewegen

Ein Pseudoelement bildet einen hellen Streifen, der beim Berühren oder Fokussieren über den Button läuft.

.shine-button {
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  color: #fff;
  background-color: #444;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.shine-button::before {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  content: "";
  background: linear-gradient(
    120deg,
    transparent,
    rgb(255 255 255 / 50%),
    transparent
  );
  transform: skewX(-20deg);
}

.shine-button:hover::before,
.shine-button:focus-visible::before {
  animation: button-schimmer 0.7s ease-out;
}

@keyframes button-schimmer {
  from {
    left: -75%;
  }

  to {
    left: 125%;
  }
}

overflow: hidden verhindert, dass der helle Streifen außerhalb des Buttons sichtbar wird.

Ladezustand eines Buttons anzeigen

Während eine Aktion verarbeitet wird, kann eine rotierende Ladeanzeige im Button den aktuellen Zustand sichtbar machen.

.loading-button {
  display: inline-flex;
  gap: 10px;
  padding: 12px 24px;
  align-items: center;
  color: #fff;
  background-color: #444;
  border: 0;
  border-radius: 5px;
}

.loading-button .spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgb(255 255 255 / 40%);
  border-top-color: #fff;
  border-radius: 50%;

  animation: loading-spinner-drehen 0.8s linear infinite;
}

@keyframes loading-spinner-drehen {
  to {
    transform: rotate(360deg);
  }
}

Der zugehörige HTML-Code lautet:

<button class="loading-button" type="button" disabled>
  <span class="spinner" aria-hidden="true"></span>
  Wird verarbeitet …
</button>

Das Attribut disabled verhindert eine erneute Betätigung, solange die Aktion verarbeitet wird.

Eine Ladeanzeige sollte nicht allein verwendet werden. Der zusätzliche Text „Wird verarbeitet …“ erklärt den Zustand auch ohne sichtbare Animation.

Reduzierte Bewegung berücksichtigen

Mit prefers-reduced-motion werden die Bewegungen für Benutzer reduziert, die diese Einstellung in ihrem Betriebssystem aktiviert haben.

@media (prefers-reduced-motion: reduce) {
  .animated-button,
  .lift-button,
  .scale-button {
    transition: none;
  }

  .pulse-button:hover,
  .pulse-button:focus-visible,
  .shine-button:hover::before,
  .shine-button:focus-visible::before,
  .loading-button .spinner {
    animation: none;
  }
}

Die Buttons bleiben auch ohne Bewegung verständlich und bedienbar. Farben, Beschriftungen und Zustände geben weiterhin eine sichtbare Rückmeldung.