css mit Adi Prinz

Grundlagen einer Transition

Eine Transition benötigt zwei unterschiedliche Zustände. Der erste Zustand wird durch die normalen CSS-Regeln festgelegt. Der zweite Zustand entsteht beispielsweise durch :hover, :focus oder durch eine zusätzliche CSS-Klasse.

.transition-box {
  width: 150px;
  padding: 20px;
  color: #fff;
  background-color: #444;
  transition-property: background-color;
  transition-duration: 0.5s;
}

.transition-box:hover {
  background-color: #6f42c1;
}
    

Beim Berühren des Elements mit dem Mauszeiger geht die Hintergrundfarbe innerhalb von einer halben Sekunde von Dunkelgrau zu Violett über.

Die Transition wird im Ausgangszustand angegeben. Dadurch wird sowohl der Übergang zum neuen Zustand als auch die Rückkehr zum Ausgangszustand animiert.

Die zu animierende Eigenschaft festlegen

Mit transition-property wird angegeben, welche CSS-Eigenschaft animiert werden soll.

.element {
  transition-property: background-color;
}
    

Mehrere Eigenschaften werden durch Kommas getrennt:

.element {
  transition-property: background-color, color, transform;
}
    

• none – es wird keine Eigenschaft animiert
• all – alle veränderten und animierbaren Eigenschaften werden berücksichtigt
• Ein Eigenschaftsname wie opacity oder background-color – nur diese Eigenschaft wird animiert

all ist bequem, kann aber unbeabsichtigt weitere Änderungen animieren. Meist ist es besser, die benötigten Eigenschaften ausdrücklich anzugeben.

Die Dauer des Ãœbergangs festlegen

transition-duration bestimmt, wie lange der Ãœbergang vom alten zum neuen Wert dauert.

.element {
  transition-property: opacity;
  transition-duration: 400ms;
}
    

Zeitangaben können in Sekunden oder Millisekunden geschrieben werden:

• 0.5s entspricht einer halben Sekunde.
• 500ms entspricht ebenfalls einer halben Sekunde.
• 1s entspricht 1000ms.

Der Ausgangswert ist 0s. Ohne eine Dauer ist deshalb kein sichtbarer Ãœbergang vorhanden.

Den zeitlichen Verlauf steuern

Mit transition-timing-function wird festgelegt, wie sich die Geschwindigkeit während des Ãœbergangs verändert.

.element {
  transition-property: transform;
  transition-duration: 0.6s;
  transition-timing-function: ease-out;
}
    

• ease – langsamer Beginn, schneller Mittelteil und langsames Ende; Standardwert
• linear – gleichmäßige Geschwindigkeit
• ease-in – langsamer Beginn
• ease-out – langsames Ende
• ease-in-out – langsamer Beginn und langsames Ende
• cubic-bezier() – eigener Geschwindigkeitsverlauf
• steps() – Ãœbergang in einzelnen, sichtbaren Schritten

.element {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
    

Für natürliche Oberflächenbewegungen wird häufig ease-out verwendet. Das Element reagiert schnell und kommt anschließend weich zum Stillstand.

Den Beginn verzögern

transition-delay legt fest, wie lange nach der Zustandsänderung gewartet wird, bevor der Ãœbergang beginnt.

.element {
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
}
    

In diesem Beispiel beginnt der Ãœbergang nach 0.2s und dauert danach 0.5s.

Verzögerungen sollten bei Bedienelementen zurückhaltend eingesetzt werden. Eine späte sichtbare Reaktion kann den Eindruck erwecken, dass das Element nicht funktioniert.

Die Kurzschreibweise transition

Die Einzeleigenschaften können in der Kurzschreibweise transition zusammengefasst werden.

.element {
  transition: background-color 0.5s ease-out 0.1s;
}
    

Die Werte stehen in diesem Beispiel für:

1. background-color – animierte Eigenschaft
2. 0.5s – Dauer
3. ease-out – zeitlicher Verlauf
4. 0.1s – Verzögerung

Bei zwei Zeitangaben bezeichnet die erste Zeit die Dauer und die zweite Zeit die Verzögerung.

Mehrere Eigenschaften animieren

Mehrere Transitions können durch Kommas voneinander getrennt werden. Jede Eigenschaft kann dabei eine eigene Dauer und einen eigenen zeitlichen Verlauf erhalten.

.card {
  background-color: #444;
  opacity: 0.8;
  transform: translateY(0);

  transition:
    background-color 0.4s ease,
    opacity 0.3s linear,
    transform 0.5s ease-out;
}

.card:hover {
  background-color: #6f42c1;
  opacity: 1;
  transform: translateY(-10px);
}
    

Die einzelnen Angaben werden immer vollständig durch Kommas getrennt. Ein Komma trennt nicht einzelne Werte, sondern vollständige Transitions.

Transitions auslösen

Eine Transition startet, sobald sich der berechnete Wert einer festgelegten CSS-Eigenschaft ändert.

Typische Auslöser sind:

• :hover – der Mauszeiger befindet sich über dem Element
• :focus – das Element besitzt den Tastaturfokus
• :focus-visible – ein sichtbarer Fokus ist erforderlich
• :checked – ein Kontrollfeld ist aktiviert
• :active – das Element wird gerade betätigt
• eine durch JavaScript hinzugefügte oder entfernte CSS-Klasse

.button {
  color: #fff;
  background-color: #444;
  transform: translateY(0);

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

.button:hover,
.button:focus-visible {
  background-color: #6f42c1;
  transform: translateY(-3px);
}
    

Ein Effekt sollte nicht ausschließlich über :hover erreichbar sein. Für interaktive Elemente muss auch die Bedienung mit der Tastatur berücksichtigt werden.

Animierbare CSS-Eigenschaften

Nicht jede CSS-Eigenschaft kann sinnvoll zwischen zwei Werten interpoliert werden. Gut geeignet sind beispielsweise:

• color und background-color
• opacity
• transform
• width und height mit berechenbaren Werten
• margin und padding
• border-color und border-radius
• box-shadow
• filter

Eigenschaften mit nicht interpolierbaren Zuständen wechseln dagegen häufig unmittelbar vom alten zum neuen Wert.

.element {
  display: none;
}
    

Ein klassischer Wechsel zwischen display: none und display: block kann nicht wie eine gewöhnliche Transition zwischen zwei Zwischenwerten berechnet werden.

Zum Ein- und Ausblenden wird häufig opacity mit visibility kombiniert.

Flüssige Übergänge gestalten

Besonders flüssig lassen sich häufig transform und opacity animieren. Änderungen an Breite, Höhe oder Position können dagegen eine erneute Berechnung des Seitenlayouts auslösen.

/* Häufig flüssiger */
.element:hover {
  transform: translateX(30px);
}

/* Kann das Layout stärker beeinflussen */
.element:hover {
  margin-left: 30px;
}
    

will-change sollte nicht vorsorglich auf viele Elemente angewendet werden. Die Eigenschaft kann zusätzliche Ressourcen benötigen und ist nur für gezielte Optimierungen vorgesehen.

Reduzierte Bewegung berücksichtigen

Manche Benutzer haben in ihrem Betriebssystem eingestellt, dass Bewegungen reduziert werden sollen. Diese Einstellung kann mit der Media Query prefers-reduced-motion berücksichtigt werden.

.element {
  transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}
    

Alternativ kann die Bewegung verkürzt oder durch eine weniger auffällige Änderung ersetzt werden.

Starke, großflächige oder dauernde Bewegungen können für manche Menschen unangenehm sein. Animationen sollten Informationen unterstützen und nicht von ihnen ablenken.

Die Transition-Eigenschaften im Ãœberblick

• transition-property – bestimmt die zu animierende Eigenschaft
• transition-duration – bestimmt die Dauer des Ãœbergangs
• transition-timing-function – bestimmt den Geschwindigkeitsverlauf
• transition-delay – verzögert den Beginn
• transition – fasst die Einzeleigenschaften zusammen

.element {
  transition:
    background-color 0.3s ease,
    transform 0.4s ease-out;
}
    

Grundlagen einer CSS-Animation

Eine einfache Animation besteht aus zwei Teilen:

1. der Definition der Animationsschritte mit @keyframes
2. der Zuweisung der Animation an ein Element

@keyframes einblenden {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.element {
  animation-name: einblenden;
  animation-duration: 1s;
}
    

Die Animation mit dem Namen einblenden verändert die Deckkraft von 0 auf 1. Dadurch wird das Element innerhalb einer Sekunde eingeblendet.

Der Name hinter @keyframes muss mit dem Wert von animation-name übereinstimmen.

Animationsschritte mit from und to

Für eine Animation mit einem Anfangs- und einem Endzustand können die Schlüsselwörter from und to verwendet werden.

• from entspricht 0%.
• to entspricht 100%.

@keyframes verschieben {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(200px);
  }
}

.element {
  animation-name: verschieben;
  animation-duration: 2s;
}
    

Das Element bewegt sich von seiner ursprünglichen Position um 200px nach rechts.

from und to eignen sich für einfache Animationen mit genau zwei festgelegten Zuständen.

Mehrere Schritte mit Prozentangaben festlegen

Mit Prozentangaben können innerhalb einer Animation beliebig viele Zwischenschritte definiert werden.

@keyframes farbwechsel {
  0% {
    background-color: #444;
  }

  50% {
    background-color: #6f42c1;
  }

  100% {
    background-color: #b8860b;
  }
}

.element {
  animation-name: farbwechsel;
  animation-duration: 3s;
}
    

Die Prozentangaben beziehen sich auf die Gesamtdauer der Animation. Bei einer Dauer von drei Sekunden wird der Zustand bei 50% nach eineinhalb Sekunden erreicht.

Mehrere Zeitpunkte können auch denselben Animationszustand verwenden:

@keyframes blinken {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
    

Zwischen den angegebenen Keyframes berechnet der Browser automatisch die erforderlichen Zwischenwerte.

Eine Animation auswählen

Mit animation-name wird angegeben, welche @keyframes-Regel verwendet werden soll.

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

.element {
  animation-name: drehen;
  animation-duration: 2s;
}
    

Der Ausgangswert von animation-name ist none. Ohne einen gültigen Animationsnamen wird keine Animation ausgeführt.

Animationsnamen sollten verständlich sein und die Bewegung oder ihren Zweck beschreiben, beispielsweise einblenden, nach-oben-verschieben oder ladeanzeige-drehen.

Die Dauer einer Animation festlegen

animation-duration bestimmt, wie lange ein vollständiger Durchlauf der Animation dauert.

.element {
  animation-name: einblenden;
  animation-duration: 800ms;
}
    

Die Dauer kann in Sekunden oder Millisekunden angegeben werden.

• 0.5s entspricht 500ms.
• 1s entspricht 1000ms.
• 2.5s entspricht 2500ms.

Der Ausgangswert ist 0s. Ohne eine Dauer ist keine sichtbare Animation vorhanden.

Den Geschwindigkeitsverlauf steuern

animation-timing-function legt fest, wie sich die Geschwindigkeit zwischen den einzelnen Keyframes verändert.

.element {
  animation-name: verschieben;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
    

• ease – langsamer Beginn und langsames Ende; Standardwert
• linear – gleichmäßige Geschwindigkeit
• ease-in – langsamer Beginn
• ease-out – langsames Ende
• ease-in-out – langsamer Beginn und langsames Ende
• cubic-bezier() – eigener Geschwindigkeitsverlauf
• steps() – Bewegung in einzelnen Schritten

.ladeanzeige {
  animation-name: drehen;
  animation-duration: 1s;
  animation-timing-function: linear;
}
    

Für eine gleichmäßig rotierende Ladeanzeige eignet sich linear, weil sich die Geschwindigkeit während der Drehung nicht verändert.

Den Start einer Animation verzögern

Mit animation-delay wird festgelegt, wie lange vor dem Start der Animation gewartet wird.

.element {
  animation-name: einblenden;
  animation-duration: 1s;
  animation-delay: 0.5s;
}
    

In diesem Beispiel beginnt die Animation eine halbe Sekunde nach dem Laden beziehungsweise Aktivieren des Elements.

Ein negativer Wert lässt die Animation so beginnen, als wäre sie bereits eine bestimmte Zeit gelaufen.

.element {
  animation-name: verschieben;
  animation-duration: 4s;
  animation-delay: -1s;
}
    

Bei animation-delay: -1s beginnt eine vier Sekunden lange Animation unmittelbar beim Zustand, den sie normalerweise nach einer Sekunde erreicht hätte.

Die Anzahl der Wiederholungen bestimmen

animation-iteration-count legt fest, wie oft die Animation ausgeführt wird.

.element {
  animation-name: pulsieren;
  animation-duration: 1s;
  animation-iteration-count: 3;
}
    

Die Animation wird in diesem Beispiel dreimal abgespielt.

.ladeanzeige {
  animation-name: drehen;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
    

Mit infinite wird die Animation unbegrenzt wiederholt.

Dauerhafte Animationen sollten sparsam eingesetzt werden. Sie können ablenken und müssen bei Bedarf angehalten oder reduziert werden können.

Die Abspielrichtung festlegen

animation-direction bestimmt, in welcher Richtung die einzelnen Animationsdurchläufe abgespielt werden.

• normal – jeder Durchlauf läuft von Anfang bis Ende
• reverse – jeder Durchlauf läuft rückwärts
• alternate – die Richtung wechselt bei jedem Durchlauf
• alternate-reverse – die Animation beginnt rückwärts und wechselt danach die Richtung

@keyframes hin-und-her {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(200px);
  }
}

.element {
  animation-name: hin-und-her;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
    

Mit alternate bewegt sich das Element abwechselnd vorwärts und rückwärts. Dadurch entsteht am Ende eines Durchlaufs kein unmittelbarer Sprung zum Anfang.

Den Zustand vor und nach der Animation steuern

animation-fill-mode legt fest, ob Werte aus den Keyframes vor dem Start oder nach dem Ende der Animation auf das Element angewendet werden.

• none – außerhalb der Laufzeit werden keine Keyframe-Werte übernommen; Standardwert
• forwards – der Zustand am Ende der Animation bleibt erhalten
• backwards – während einer Verzögerung wird bereits der passende Anfangszustand angewendet
• both – kombiniert forwards und backwards

@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation-name: einblenden;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}
    

Mit both verwendet das Element während der Verzögerung den Anfangszustand und behält nach der Animation den Endzustand bei.

Eine Animation anhalten und fortsetzen

Mit animation-play-state kann eine laufende Animation angehalten oder fortgesetzt werden.

• running – die Animation wird abgespielt
• paused – die Animation wird angehalten

.element {
  animation: drehen 2s linear infinite;
  animation-play-state: running;
}

.element:hover {
  animation-play-state: paused;
}
    

Beim Anhalten bleibt das Element an seiner aktuellen Animationsposition stehen. Wird running wieder angewendet, läuft die Animation an dieser Stelle weiter.

Bei automatisch laufenden oder dauerhaften Animationen kann eine Möglichkeit zum Anhalten die Bedienbarkeit verbessern.

Die Kurzschreibweise animation

Die einzelnen Animationseigenschaften können mit der Kurzschreibweise animation zusammengefasst werden.

.element {
  animation: einblenden 1s ease-out 0.2s 1 normal both running;
}
    

Die Werte bedeuten in diesem Beispiel:

1. einblenden – Name der Animation
2. 1s – Dauer
3. ease-out – Geschwindigkeitsverlauf
4. 0.2s – Verzögerung
5. 1 – Anzahl der Durchläufe
6. normal – Abspielrichtung
7. both – Verhalten vor und nach der Animation
8. running – Abspielzustand

Bei zwei Zeitangaben bezeichnet die erste Zeit die animation-duration und die zweite Zeit den animation-delay.

Mehrere Animationen kombinieren

Mehrere Animationen können durch Kommas voneinander getrennt auf dasselbe Element angewendet werden.

@keyframes einblenden {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes verschieben {
  from {
    transform: translateY(30px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation:
    einblenden 0.8s ease-out both,
    verschieben 1s ease-out both;
}
    

In diesem Beispiel wird das Element gleichzeitig eingeblendet und nach oben verschoben.

Jede durch ein Komma getrennte Angabe beschreibt eine vollständige Animation.

Animationen gezielt auslösen

Eine Animation beginnt normalerweise, sobald die zugehörige CSS-Regel auf ein Element angewendet wird. Sie kann beispielsweise durch eine Pseudoklasse oder eine zusätzliche Klasse ausgelöst werden.

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

@keyframes pulsieren {
  50% {
    transform: scale(1.08);
  }
}
    

JavaScript kann eine Klasse hinzufügen, wenn eine Animation erst nach einer bestimmten Aktion starten soll.

.element.is-visible {
  animation: einblenden 0.8s ease-out both;
}
    

Wird dieselbe Animationsklasse erneut auf ein bereits animiertes Element angewendet, startet die Animation nicht immer automatisch neu. Dafür muss die Klasse gegebenenfalls zuerst entfernt und anschließend erneut hinzugefügt werden.

Animationen mit transform gestalten

Die Eigenschaft transform eignet sich besonders gut für Bewegungen, Drehungen und Größenänderungen.

@keyframes schweben {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

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

Innerhalb einer einzelnen transform-Eigenschaft können mehrere Transformationsfunktionen kombiniert werden.

@keyframes drehen-und-vergroessern {
  from {
    transform: rotate(0) scale(1);
  }

  to {
    transform: rotate(360deg) scale(1.2);
  }
}
    

Mehrere Transformationen müssen gemeinsam in derselben transform-Deklaration stehen. Eine spätere Deklaration würde eine frühere transform-Deklaration überschreiben.

Animationen flüssig gestalten

Besonders gut für flüssige Animationen eignen sich häufig transform und opacity. Änderungen an width, height, margin oder top können dagegen zusätzliche Layoutberechnungen verursachen.

/* Häufig flüssiger */
@keyframes bewegen {
  to {
    transform: translateX(200px);
  }
}

/* Kann das Layout stärker beeinflussen */
@keyframes bewegen {
  to {
    margin-left: 200px;
  }
}
    

Animationen sollten auf echten Zielgeräten geprüft werden. Besonders auf Smartphones können zu viele gleichzeitig animierte Elemente die Darstellung beeinträchtigen.

Reduzierte Bewegung berücksichtigen

Mit der Media Query prefers-reduced-motion kann auf die Einstellung des Betriebssystems für reduzierte Bewegungen reagiert werden.

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

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}
    

Eine Animation muss nicht immer vollständig entfernt werden. Sie kann auch verkürzt oder durch eine einfache Änderung der Deckkraft ersetzt werden.

Animationen dürfen keine wichtigen Informationen ausschließlich durch Bewegung vermitteln. Inhalte und Bedienelemente müssen auch ohne Animation verständlich und verwendbar bleiben.

Die Animationseigenschaften im Ãœberblick

• animation-name – wählt die Keyframes aus
• animation-duration – bestimmt die Dauer
• animation-timing-function – bestimmt den Geschwindigkeitsverlauf
• animation-delay – verzögert den Start
• animation-iteration-count – bestimmt die Anzahl der Durchläufe
• animation-direction – bestimmt die Abspielrichtung
• animation-fill-mode – steuert den Zustand vor und nach der Animation
• animation-play-state – hält die Animation an oder setzt sie fort
• animation – fasst die Einzeleigenschaften zusammen

.element {
  animation: einblenden 1s ease-out 0.2s 1 normal both;
}