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

  • X-Post:jhey ʕ•ᴥ•ʔ

    Segue: Sammlung von Seitenübergängen mit CSS View Transitions

    Entwickler Jhey Tompkins hat unter dem Projektnamen Segue eine wachsende Prototypensammlung für Seitenübergänge veröffentlicht. Die Beispiele basieren auf CSS View Transitions und bieten Code zum Kopieren sowie für KI-Agenten.

    64Lesezeichen2718Aufrufe

    Webentwicklung· Demo

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

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

Ein Teil von diesem Inhalt wurde mit KI gemacht.