Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Animation/mehrstufige Animationen

Aus SELFHTML-Wiki
Animation(Weitergeleitet von Linear())
Wechseln zu: Navigation, Suche

Mit CSS-Animation kannst du Elemente wie Bilder, Boxen oder Text animieren, indem eine (oder mehrere) CSS-Eigenschaft(en) im Verlauf der Animation unterschiedliche Werte erhalten.

Anders als bei transition, bei der nur der Übergang zwischen zwei Zuständen animiert wird, lassen sich mit animation komplexere Abläufe mit mehreren Zwischenschritten und Wiederholungen umsetzen.

Dieses Tutorial soll zeigen, wie Animationen aufgebaut werden – und wie sie durch gute Choreographie gezielt eingesetzt werden können, statt nur Effekte zu zeigen.[1]

Animationen und Barrierefreiheit

Animationen können eine Seite beleben und die Benutzerführung verbessern – sie können aber auch nerven. Dies kann bis hin zur körperlichen Übelkeit (Motion-triggered vestibular spectrum disorder) führen.[2][3]

Deshalb sollten Animationen:

  • sparsam eingesetzt werden
  • eine klare Funktion haben (Feedback, Orientierung, Status)
  • und sich an die Systemeinstellungen der Nutzer anpassen


Animationen - den Nutzer entscheiden lassen 
/* alle Animationen */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* feiner eingestellt: Nur im konkreten Fall: */

@media (prefers-reduced-motion: reduce) {
  input:invalid {
    animation: none;
  }
}

Das Merkmal prefers-reduced-motion (bevorzugt weniger Bewegung) erkennt, ob der Nutzer eine Seite mit allen Animationen und Bewegungen sehen oder ausdrücklich darauf verzichten möchte.[4] Der Benutzer kann diese Präferenz über eine Einstellung im Betriebssystem oder im Browser angeben.

Bei Animationen, die zum Inhalt gehören, könnte man mit der Web Animations API ein Kontrollfeld einbauen, in dem die Playback Rate entsprechend verlangsamt wird.

Wann reicht eine Transition?

In vielen Fällen ist eine transition völlig ausreichend. Sie animiert den Übergang zwischen zwei Zuständen, zum Beispiel beim Hover-Effekt oder bei einer Fokus-Markierung.

HTML kann Eingaben bereits selbst überprüfen.
In diesem Beispiel sind nur Zahlen von 0 bis 10 erlaubt:

Beispiel 
<input type="number" min="0" max="10">

Gibt der Nutzer einen Buchstaben oder eine Zahl außerhalb dieses Bereichs ein, erkennt der Browser die Eingabe als ungültig.
In diesem Fall wird das Eingabefeld automatisch mit dem CSS-Selektor :invalid angesprochen.

Beispiel 
input {
  border: medium solid #ccc;
  transition: border-color 0.3s ease;
}

input:invalid {
  border-color: red;
}

Wenn eine ungültige Eingabe erfolgt, wird der Rand rot gefärbt.


Eine transition eignet sich immer dann, wenn es nur einen Start- und einen Endzustand gibt.
Sobald eine Bewegung mehr Charakter bekommt – etwa ein Zittern, ein Pulsieren oder ein mehrstufiger Ablauf – stößt sie an ihre Grenzen.

Wann braucht man Keyframes?

Sobald eine Bewegung mehr Charakter bekommt – etwa ein Zittern, ein Pulsieren oder ein mehrstufiger Ablauf – stößt sie an ihre Grenzen.

Mit der @keyframes-Regel lassen sich die einzelnen Schritte einer Animation festlegen. Sie definiert, wie sich eine oder mehrere CSS-Eigenschaften im Verlauf der Animation verändern.

Animierte Fehlermeldung

Statt nur die Farbe zu ändern – was bei schlechten Sichtverhältnissen wie greller Sonne nicht auffällig genug ist, kann eine kurze Bewegung zusätzlich signalisieren, dass etwas nicht stimmt. Nutzer von Apple-Geräten kennen dieses Verhalten bereits:

Zittern als weiteres Merkmal, das etwas nicht stimmt ansehen …
input:invalid {
	color: red;	
	animation: error 0.4s;
}	

@media (prefers-reduced-motion: reduce) {
  input:invalid {
	animation: none;
  }
}
	
@keyframes error {
  0%  { translate:  0;   }
  20% { translate: -6px; }
  40% { translate:  6px; }
  60% { translate: -4px; }
  80% { translate:  4px; }
  100%{ translate: 0;    }	
}

Wenn ein Eingabefeld eine ungültige Eingabe erhält, greift der :invalid-Selektor und kennzeichnet dies. Mit der animation-Eigenschaft wird die Animation error aufgerufen.

Diese wird in einer @keyframes-Regel notiert., die aus drei Bestandteilen besteht:

  • einem Namen, über den die Animation später mit der Eigenschaft animation-name referenziert wird
  • Wegpunkten, die den zeitlichen Ablauf der Animation beschreiben
    entweder mit den Schlüsselwörtern from und to für Start- und Endzustand
    oder mit mehreren Wegpunkten, die über Prozentangaben definiert werden
  • den Wertangaben für die zu animierenden CSS-Eigenschaften, die innerhalb der geschweiften Klammern an den jeweiligen Wegpunkten festgelegt werden

Im Beispiel wird das Eingabefeld mithilfe der Eigenschaft translate horizontal verschoben. Der Keyframe error besteht aus sechs Wegpunkten, in denen das Feld abwechselnd nach links und rechts bewegt wird. Bei 100% kehrt es wieder an seine ursprüngliche Position zurück.

Die Animation wird anschließend über die Eigenschaft animation mit ihrem Namen (error) aufgerufen und mit einer Dauer von 0.4s ausgeführt.

Beachte: Bei Größenänderungen ist es ratsam Transformationen auszuführen. Diese werden von Browsern flüssiger ausgeführt, als eine Animation von Eigenschaften wie font-size, width, etc.

Fehlermeldung einblenden

Im oberen Beispiel wird eine falsche Eingabe rot gekennzeichnet, der Nutzer weiß aber oft nicht, was er falsch gemacht hat.

Deshalb wird nun ein Fehlerhinweis im HTML notiert:


Hinweis 
  <label>
    Zahl (0–10)
    <input
      type="number"
      min="0"
      max="10"
      required
      aria-describedby="num-error"
    >
    <p class="error" id="num-error">
      Bitte gib eine Zahl zwischen 0 und 10 ein.
    </p>
  </label>

Der Hinweis ist immer im DOM (kann also durch Screenreader gelesen werden) und ist mit aria-describedby im input-Element verbunden. Für die Validation ist kein JavaScript erforderlich.

Die Animation läuft nur nach der Benutzerinteraktion und verbessert das Feedback, ohne es zu ersetzen.

Fehlermeldung einblenden ansehen …
.error {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

input:user-invalid + .error {
  animation: reveal-error 0.5s ease forwards;
}
	
@keyframes reveal-error {
  from {
    max-height: 0;
    opacity: 0;
    translate:  0 -4px;
  }
  to {
    max-height: 4rem;
    opacity: 1;
    translate: 0;
  }
}

Sobald eine Eingabe getätigt wurde, überprüft der Browser ob diese valide ist. Der user-invalid-Selektor greift erst nach einer Benutzereingabe und nicht wie invalid bereits beim Laden der Webseite, da das Feld ja noch leer ist.

In der Animation reveal-error wird dann …

Der Text erscheint, wo man ihn erwarten würde und die Animation folgt der normalen Leserichtung. Ein solcher vertical reveal fühlt sich natürlich an und wirkt weniger aggressiv als ein Zittern.

Erfolg signalisieren

Der Normalfall ist ja eigentlich, dass der Nutzer eine richtige Eingabe vorgenommen hat. Auch in desem Fall soll er eine Rückmeldung erhalten.

Erfolg signalisieren ansehen …
input {
  transition: 
    border-color 0.3s ease, 
    box-shadow 0.3s ease;
}

input:focus {
  box-shadow: 0 0 0 3px blue;
}

input:focus:valid {
  border-color: green;
  box-shadow: 0 0 0 3px lime;
  animation: confirm 0.4s ease-in forwards;
}

@keyframes confirm {
    0% { border-color: green; scale: 1;}
   50% { border-color: lime;  scale: 1.05; }
  100% { border-color: lime;  scale: 1; }
}

Der keyframe mit dem Namen confirm sorgt dafür, dass …

  • die border-color von grün auf das hellere lime wechselt und
  • der Text mit scale um 5% vergrößert und dann wieder auf das Normalmaß reduziert wird.
    Eine solche geringe Größenänderung fällt auf und ist doch weniger aufdringlich.


animation: confirm 0.4s ease forwards;

Die Eigenschaft animation ist eine Zusammenfassung der möglichen Einzelangaben:

  • animation-name ruft die passende @keyframes Regel namens confirmfür die Animation auf.
  • animation-duration legt die Dauer der Animation fest.
    Zeitangabe in Sekunden (s) oder Millisekunden (ms)
  • animation-timing-function legt Beschleunigungskurven der Animation fest
    Mit ease-in beginnt die Animation mit einem langsamen Start
  • animation-fill-mode legt fest, welchen Zustand das animierte Element nach Beendigung der Animation haben soll.
    Mit dem Schlüsselwort forwards wird festgelegt, dass die Animation im Endzustand angezeigt wird und nicht „zurückspringt“.

Ohne Anfang und Ende

Bisher waren Animationen reaktiv:
Sie wurden durch Benutzeraktionen oder Zustände ausgelöst (focus, valid, invalid).
Es gibt aber Animationen, die keinen klaren Anfang oder kein Ende haben – oder deren Ablauf nicht direkt vom Nutzer gesteuert wird.

Endlose Animationen – „System arbeitet“

Dieser Loading-Spinner zeigt, dass etwas berechnet wird und die Webseite derzeit nicht zur Verfügung steht:

Alles dreht sich! ansehen …
#gear {
    animation: run 4000ms linear infinite;
}

#gear:hover {
	animation-play-state: paused;
}

@keyframes run {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 1turn;
    }
}
  • animation-timing-function legt fest, dass die Animation linear verlaufen soll.
    Entferne dieses Schlüsselwort im Frickl und beobachte, was beim Standardwert ease passiert.
  • animation-iteration-count legt fest, wie oft die Animation wiederholt werden soll. Das Schlüsselwort infinite lässt die Animation run in einer Endlosschleife laufen.

Die Eigenschaft animation-play-state wird beim Überfahren mit der Maus auf animation-play-state: paused; gesetzt. Die Animation pausiert, bis sich die Maus wieder entfernt.

Weitere Steuerungsmöglichkeiten wie eine Änderung der Richtung oder Geschwindigkeit sind mit CSS nicht möglich.

Animationen beenden

Wenn der Zustand endet, soll auch die Animation beendet werden.

Dabei stoßen wir auf ein Problem:

  • CSS kann nicht wissen, wann das Laden einer Ressource oder Berechnen eines Vorgangs abgeschlossen ist.
  • CSS kann auf nur Zustände reagieren.
Mach mich aus! ansehen …
#done:checked ~ svg #gear {
  animation: none;
}

@keyframes run {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 1turn;
    }
}

Im Beispiel befindet sich nun eine Checkbox. Wird diese ausgewählt, greift die Pseudoklasse :checked. Über den Geschwister-Kombinator ~ wird nun die Animation auf none gesetzt und so beendet.

CSS beendet die Animation nicht selbst – es reagiert darauf, dass der Ladezustand beendet wurde.



Siehe auch

Weblinks

  1. ↑ Web Animation at Work von Rachel NaborsFebruary 11, 2014 (alistapart.com)
    sehr guter Grundlagen-Artikel, der zeigt wie Animationen wirken und wann man sie einsetzen sollte
  2. ↑ web.dev: prefers-reduced-motion: Sometimes less movement is more von Thomas Steiner, 10.12.2019
  3. ↑ Justus-Liebig-Universität: Das Vestibular-Syndrom
  4. ↑ css-tricks: An Introduction to the Reduced Motion Media Query

Beispiele

will-change

Abgerufen am 31.01.2026
von "http://wiki.selfhtml.org/wiki/Animation/mehrstufige_Animationen"