Easing Functions Cheat Sheet: Übersicht mathematischer Übergangsfunktionen für CSS und Web-Animationen

LinkAndrey Sitnik und Ivan SolovevSammlung

Das Open-Source-Projekt easings.net von Andrey Sitnik und Ivan Solovev bietet eine interaktive Referenz für Easing-Funktionen. Es veranschaulicht Kurvenverläufe für natürliche Bewegungen und liefert Implementierungen für CSS, PostCSS sowie TypeScript.

Das Wichtigste

  1. Erklärung von Easing-Funktionen als zeitliche Änderungsrate zur Nachbildung realistischer physikalischer Bewegungen.
  2. Katalogisierung von Funktionsfamilien wie Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic und Bounce jeweils in In-, Out- und InOut-Varianten.
  3. Bereitstellung von CSS-Code für transition und animation sowie cubic-bezier-Kurven und @keyframes-Fallback für komplexe Verläufe.
  4. Integration in Toolings über PostCSS-Plugins wie postcss-easings und postcss-easing-gradients für nicht-lineare Farbverläufe.
  5. Mathematische Implementierungen der Kurven als TypeScript-Funktionen auf Basis eines Fortschrittswerts zwischen 0 und 1.

Warum das relevant ist

Natürliche Benutzeroberflächen erfordern flüssige, physikalisch plausibel wirkende Übergänge statt linearer Geschwindigkeiten. Die Plattform dient Frontend-Entwicklern und UI-Designern als Referenz, um passende Kurven direkt als CSS oder Programmcode zu übernehmen.

Einordnung

Das Tool standardisiert den Zugriff auf Easing-Formeln, die über die Standardwerte der Browser hinausgehen. Besonders nützlich ist die Aufbereitung für unterschiedliche Einsatzzwecke – vom einfachen CSS-Transition-Snippet über PostCSS-Plugins bis hin zur direkten mathematischen Formel für JavaScript-gestützte Animationen.

Erwähnte Links

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:kinetics.colorion.co

    Kinetics: UI-Animationsbibliothek auf Basis von Federphysik

    Kinetics bietet eine Sammlung von 153 Web-Interface-Animationen, die auf Federphysik (Spring Physics) anstelle von starren Easing-Dauern basieren. Jeder Effekt wird mit CSS-Code, React-Komponenten und vorgefertigten KI-Prompts bereitgestellt.

    Webentwicklung· Sammlung

  • Link:Jakub Antalik

    Transitions.dev: UI-Transitionen für Web-Apps und KI-Agenten

    Transitions.dev ist eine Sammlung von Benutzeroberflächen-Animationen für Webanwendungen. Die Übergänge decken Standardkomponenten sowie spezielle Interaktionsmuster für KI-Anwendungen ab und lassen sich direkt kopieren oder über einen Skill in KI-gestützte Coding-Agenten einbinden.

    KI & AI· Sammlung

  • Link:transition-kit.space

    Transition Kit: Vorlagen für Page- und Theme-Transitions

    Transition Kit ist eine Ressourcen- und Template-Sammlung für Seitenübergänge und Theme-Wechsel im Web. Die Bibliothek nutzt die moderne View Transitions API, bietet Live-Vorschauen im Browser und erlaubt das direkte Anpassen und Kopieren des Codes.

    Webentwicklung· Tool

  • Link:Emil Kowalski

    Design-Engineering-Philosophie von Emil Kowalski

    Emil Kowalski fasst in einem Skill-Leitfaden seine Prinzipien für Design Engineering, UI-Polishing und Interface-Animationen zusammen. Im Mittelpunkt stehen trainierter Geschmack, unsichtbare Details sowie präzise Regeln für Timing, Easing und Komponenten-Feedback.

    Webentwicklung· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.