Dimm-Dauer

Was dieses Werkzeug zeigt

Dreissig Proben blenden in einer Endlosschleife auf und wieder ab. Jede Zeile verwendet eine andere Dauer, von 100 bis 3000 Millisekunden in Hundertersprüngen.

Die angegebene Dauer gilt pro Richtung

In der Zeile „200ms“ braucht die Probe 200ms zum Aufblenden und nochmals 200ms zum Abblenden. Ein voller Durchlauf dauert also 400ms. Der angezeigte Wert entspricht damit genau dem, was man später als Dauer ins CSS schreibt.

Umgesetzt mit Deckkraft, nicht mit Sichtbarkeit

Verändert wird ausschliesslich die Deckkraft von 0 auf 1 und zurück. Grösse, Lage und Platzbedarf bleiben unverändert.

Die beiden Kurven sind getrennt einstellbar

Die Auswahl oben setzt die Kurve für das Aufblenden und die für das Abblenden unabhängig voneinander. Umgesetzt ist das mit einer Angabe je Zwischenschritt innerhalb der Bewegungsvorlage, gesteuert über reines CSS. Ohne JavaScript funktioniert die Umschaltung genauso.

Die drei Kurvenformen

Die Begriffe stammen vom Betreiber dieser Seite. Die Zuordnung zu den CSS-Werten ist unten belegt.

linear → CSS linear

Gleichmässiges Tempo von Anfang bis Ende.

progressiv → CSS ease-in

MDN: „dass die Interpolation langsam beginnt und dann nach und nach bis zum Ende beschleunigt“. Bildlich: ein Auto, das anfährt.

degressiv → CSS ease-out

MDN: „dass die Interpolation abrupt beginnt und dann nach und nach gegen Ende verlangsamt“. Bildlich: ein Auto, das sanft zum Stehen kommt.

Grenzen dieser Messung

• In der Endlosschleife betrachtet man. In einer echten Bedienung wartet man auf eine Reaktion. Warten lässt Zeit länger wirken – Werte, die hier angenehm sind, können beim Anklicken zäh wirken.
• Unter etwa 150 Millisekunden ist der Kurvenunterschied mit blossem Auge praktisch nicht mehr erkennbar.
• Zwischen den Durchläufen gibt es keine Pause. Wer die beiden Phasen einzeln beurteilen will, nimmt den Kurven-Entscheid.

Grundlage und Quellen

• MDN – easing-function (deutsch)
• MDN – animation-timing-function

Hinweis: Die deutschen MDN-Seiten sind automatisch aus dem Englischen übersetzt und können Fehler enthalten. MDN kennzeichnet das selbst. Die hier zitierten Stellen wurden am 23.09.2026 geprüft.