Animation/Übergänge

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Auf Webseiten können Besucher interaktive Elemente wie Links oder Checkboxen mit Maus „hovern“ oder mit der Tastatur fokussieren. Eine solche Benutzeraktion kann mit dynamischen Pseudoklassen wie hover, focus oder :checked selektiert und entsprechend gestaltet werden.

Während dies früher nach dem Motto „Ein/Aus“ umgeschaltet wurde, kann man mit transition weiche Übergänge erzeugen. Dabei werden Werte von CSS-Eigenschaften allmählich oder schrittweise geändert, indem die dazwischenliegenden Werte interpoliert werden.

Allerdings sind nicht alle Eigenschaften animierbar. So kann man etwa nicht weich zwischen verschiedenen Schriftarten umschalten und auch die Animation von z-index wird kein Fading erzeugen.

→ CSS/Eigenschaften/animierbare Eigenschaften

Vorüberlegungen

Animationen auslösen

Wie oben erwähnt, werden transitions durch Benutzeraktionen ausgelöst, die mit CSS selektiert werden können:

Benutzeraktionen können auch mit JavaScript verarbeitet werden. Um die Aufmerksamkeit des Nutzers zu lenken, könnte man Klassen hinzufügen oder ändern:

Den Nutzer entscheiden lassen

Animationen können eine Seite beleben - sie können aber auch nerven. Dies kann bis hin zur körperlichen Übelkeit (Motion-triggered vestibular spectrum disorder) führen.[1][2] Deshalb lautet ein Grundsatz im Webdesign, dass Festlegungen im CSS die Wünsche der Nutzer berücksichtigen sollten.

Warum auch Transitions problematisch sein können

Für viele Nutzer sind nicht nur lange Animationen unangenehm, sondern auch:

  • Zoom-, Slide- oder Parallax-Transitions
  • große Bewegungen (translate) über den Bildschirm
  • Easing-Effekte, die sich „schwammig“ anfühlen
  • häufige Mikro-Transitions (z. B. Hover überall)

Menschen mit

  • vestibulären Störungen,
  • Migräne,
  • Konzentrationsproblemen

können schon auf kurze Transitions reagieren.


Animation, aber nicht, wenn's der Nutzer nicht will! ansehen …
nav a {
	background-color: skyblue;
	transition:
		transform 0.5s,
		background-color 1s;
}

nav a:hover,
nav a:focus {
	background-color: gold;
	transform: translate(5px, 5px);
}

@media (prefers-reduced-motion: reduce) {
  nav a {
    transition: background-color 0.01ms;
    transform: 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.[3]
Der Benutzer kann diese Präferenz über eine Einstellung im Betriebssystem oder im Browser angeben.

Anwendungsbeispiele

Und trotzdem helfen Animationen, Blick und Aufmerksamkeit zu steuern.
Ein Tooltip blendet weich ein, wenn zusätzliche Infos erscheinen.
Ein Menü fährt aus, damit klar ist, woher es kommt.
Weiche Übergänge verbessern Orientierung und Usability.

Ausgewählte Links sichtbar machen

Wenn der Nutzer Links entweder mit Maus oder Tastatur auswählt, soll dies sichtbar gemacht werden:

Link mit weichen Übergang bei :focus, :hover ansehen …
nav a {
	background-color: skyblue;
	transition:
		transform 0.5s,
		background-color 1s;
}

nav a:hover,
nav a:focus {
	background-color: gold;
	transform: translate(5px, 5px);
}

@media (prefers-reduced-motion: reduce) {
  nav a {
    transition: background-color 0.01ms;
    transform: none;
  }
}

Die Links der Navigation erhalten bei :hover und :focus sowohl eine Transformation als auch eine Änderung der Hintergrundfarbe.

Dies soll nicht abrupt umschalten, sondern in einem weichen Übergang verlaufen. Dazu erhält die transition eine durch Komma getrennte Liste der zu animierenden CSS-Eigenschaften (background-color und transform), sowie je eine Dauer (transition-duration) in Sekunden verwendet.

Wenn der Nutzer im Betriebssystem oder seinem Browser ausgewählt hat, weniger Animationen sehen zu wollen, wird die Transformation nicht ausgeführt, während die Farbänderung des Hintergrunds nicht mit einem weichen Übergang, sondern mit einer transition-duration von 0.01ms nahezu sofort ausgeführt wird.

Standardwert für transition-property ist all – empfehlenswert ist jedoch die zu animierenden Eigenschaften explizit zu nennen. So können unbeabsichtigte Animationen ausgeschlossen werden.

Siehe auch
Wie so etwas in einer „fertigen“ Webseite aussieht, kannst du bei unseren fertigen Layouts sehen.

transition-delay

Die Eigenschaft transition-delay legt fest, mit welcher Verzögerung der Übergang ausgelöst werden soll. Sie ist nützlich, wenn wir erst reagieren möchten, nachdem der Benutzer eine klare Absicht gezeigt hat, oder wenn wir die Aufmerksamkeit Schritt für Schritt lenken möchten, anstatt alles auf einmal zu ändern.

verzögerte Übergänge, um Flackern auszuschließen ansehen …
nav a {
	transition:
		background-color 1s,
		translate 0.5s ease 0.25s;
}

nav a:hover,
nav a:focus {
	background-color: gold;
	translate: 5px 5px;
}

.galerie img {
  filter: brightness(0.7);
  scale: 1;
  transition:
    filter 0.5s,
    scale 0.5s;
}

.galerie:hover img,
.galerie figure:focus img {
  filter: brightness(1);
  scale: 1.05;
}

.galerie figure:nth-child(1) img { transition-delay: 0; }
.galerie figure:nth-child(2) img { transition-delay: 0.5s; }
.galerie figure:nth-child(3) img { transition-delay: 1s; }
.galerie figure:nth-child(4) img { transition-delay: 1.5s; }

Die Links in der Navigation ändern ihre Hintergrundfarbe, sobald gehovert wird. Für die Verschiebung erhält die transition einen weiteren Parameter: 

translate 0.5s ease 0.25s;

Der letzte Parameter legt fest, dass der Übergang erst verzögert starten soll. Beim schnellen Durchtabben wird die Verschiebung noch nicht ausgelöst, um visuelle „Sprünge“ zu vermeiden und die UI ruhig zu halten.

Die Bilder werden bei :hover vergrößert und aufgehellt - diese transition wird über den .galerie figure:nth-child(2)-Selektor in einem staggered reveal zeitverzögert ausgeführt.

Beachten Sie: Wenn du zwei Zeitwerte angibst, ist der erste die Dauer, der zweite immer Beginn der Animation.

Einfliegende Bildunterschriften mit transition-delay

Dieses Beispiel kann man weiter ausbauen. Hier isnd die figcaption ausführlicher:

Bildergalerie mit einfliegenden Bildunterschriften ansehen …
figure h2 {
  transform: translateY(-200px);
  transition: all 0.3s ease-in-out;
}
 
figure:focus h2,
figure:hover h2 {
  transform: translateY(0px);
  transition-delay: 0.4s;
}
 
figure p {
  transform: translateX(200px) rotate(90deg);
  transition: all 0.4s ease-in-out;
}
 
figure:focus p,
figure:hover p {
  transform: translateX(0px) rotate(0deg);
  transition-delay: 0.2s;
}
 
figure a.info {
  transform: translateY(-200px);
  transition: all 0.2s ease-in-out;
}
 
figure:focus a.info,
figure:hover a.info {
  transform: translateY(0px);
  transition-delay: 0.3s;
}

Im Beispiel werden die Bildunterschriften bei :hover oder :focus mit unterschiedlichen Verzögerungen eingeblendet. Für die Einblendung werden die verschiedenen Funktionen von transform verwendet.

transition-timing-function

Die Eigenschaft transition-timing-function definiert die Geschwindigkeitskurve des Transitions-Übergangs.[4]

Mit den folgenden Schlüsselwörtern und CSS-Funktionen kann man transitions feintunen:

  • ease: Übergang mit langsamen Start, beschleunigt und endet langsam (Standardwert)
    ⇔ cubic-bezier(0.25,0.1,0.25,1)
  • ease-in: Übergang mit einem langsamen Start
    ⇔ cubic-bezier(0.42,0,1,1)
  • ease-out: Übergang mit einem langsamen Ende
    ⇔cubic-bezier(0,0,0.58,1)
  • ease-in-out: Übergang mit einem langsamen Start und Ende
    ⇔ cubic-bezier(0.42,0,0.58,1)
  • linear: Übergang mit gleicher Geschwindigkeit vom Start bis zum Stop
    ⇔ cubic-bezier(0,0,1,1)
  • linear(): Die gleichnamige CSS-Funktion erlaubt 2 oder mehr durch Kommata getrennte Zahlen von 0 bis 1 oder Prozentangaben[5]
  • cubic-bezier(n,n,n,n): Diese CSS-Funktion benötigt vier durch Kommata getrennte numerische Werte von 0 bis 1 oder Prozentangaben.
    Sie erzeugen eine Bézier-Kurve.[6]
  • steps(): Mit dieser CSS-Funktion wird der Unterschied der beiden Werte vom Browser in Einzelschritte unterteilt - der Übergang erfolgt stufenweise!


Autorennen ansehen …
.linear .auto {
  transition-timing-function: linear;
}
 
.ease-in .auto {
  transition-timing-function: ease-in;
}
 
.ease-out .auto {
  transition-timing-function: ease-out;
}
 
.ease-in-out .auto {
   transition-timing-function: ease-in-out;
}

Im Beispiel sieht man, wie die Animation je nach gewählter transition-timing-function unterschiedlich beschleunigt. Allerdings kommen alle – da sie den gleichen Wert für transition-duration haben – gleichzeitig im Ziel an. Die Animation wird mit der Pseudoklasse :checked ausgelöst.

Rehe im Wald: scheinbare Animation einer Schlüsselwort-Eigenschaft

Transitionen sind grundsätzlich nur für numerische CSS-Eigenschaften möglich. Mit Schlüsselworteigenschaften geht das nicht, weil der Browser hier keine Zwischenwerte berechnen kann. Man kann eine solche Transition aber simulieren, indem beide gewünschten Darstellungen erzeugt, eine davon mit opacity:0 unsichtbar macht und dann die Opacity-Eigenschaft animiert, um zu überblenden.

Das folgende Beispiel zeigt eine Waldlandschaft mit zwei Rehen. Fährt die Maus über die Rehe (oder bringt man mit Tab den Fokus darauf), wird scheinbar der Überblendungsmodus (mix-blend-mode) animiert. In Wahrheit gibt es drei Bilder: einmal die Waldlandschaft, und dann zweimal das Rehe-Bild, absolut über dem Waldbild positioniert, aber mit verschiedenen Werten für den mix-blend-mode.

Pseudo-Animation per Opacity ansehen …
figure {
  position:relative;
}
.rehe {
  position:absolute;
  top: 180px; left: 120px;
  transition-duration: 1s;
  transition-property: opacity;
}
.rehe.regular {
  mix-blend-mode: saturation;
  z-index: 2;
}
.rehe.hover {
  opacity: 0;
  mix-blend-mode: normal;
}
.rehe.regular:is(:hover,:focus) {
  opacity: 0;
}
.rehe.regular:is(:hover,:focus) ~ .rehe {
  opacity: 1;
}

<img src="landschaft.jpg" alt="lichter Wald mit Gras">
<img class="rehe regular" tabindex=0 src="https://wiki.selfhtml.org/images/5/53/Rehe.png" alt="zwei Rehe">
<a class="rehe hover" href="https://de.wikipedia.org/wiki/Reh">
  <img src="https://wiki.selfhtml.org/images/5/53/Rehe.png" alt="">
</a>

Siehe auch

  • 3D-Transforms

    Flip-Cards mit

    • perspective
    • backface-visibility
     
  • Memo-Quiz
    • DOM-Manipulation
    • Event-Delegation
     

Weblinks

  1. ↑ web.dev: prefers-reduced-motion: Sometimes less movement is more von Thomas Steiner, 10.12.2019
  2. ↑ Justus-Liebig-Universität: Das Vestibular-Syndrom
  3. ↑ css-tricks: An Introduction to the Reduced Motion Media Query
  4. ↑ An Interactive Guide to CSS Transitions October 28th, 2025. (joshcomeau.com)
    Sehr ausführliches Tutorial, das bes. die timing-functions unter die Lupe nimmt.
  5. ↑ MDN: linear()-Function
  6. ↑ MDN: cubic-bezier()

Abgerufen am 24.12.2025
von "http://wiki.selfhtml.org/wiki/Animation/%C3%9Cberg%C3%A4nge"