Easing Functions Cheat Sheet: Visual Guide to Transition Curves for CSS and Web Animations

LinkAndrey Sitnik und Ivan SolovevResource

The open-source resource easings.net, created by Andrey Sitnik and Ivan Solovev, serves as an interactive reference for easing functions. It visualises motion curves that emulate real-world physics and provides snippets for CSS, PostCSS, and TypeScript.

Key points

  1. Defines easing functions as the rate of parameter change over time to replicate natural, non-constant motion.
  2. Categorises standard easing curves including Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, and Bounce in In, Out, and InOut variations.
  3. Supplies CSS code snippets for transitions, animations, cubic-bezier definitions, and @keyframes implementations.
  4. Supports PostCSS workflows via plugins such as postcss-easings and postcss-easing-gradients for smooth colour transitions.
  5. Provides mathematical formulas implemented in TypeScript mapping animation progress between 0 and 1.

Why it matters

Digital interfaces feel more intuitive when micro-interactions mimic the acceleration and deceleration of physical objects. This reference simplifies selecting and implementing appropriate motion curves across various web animation stacks.

Analysis

By pairing interactive previews with code snippets across CSS, tooling plugins, and raw mathematical functions, easings.net acts as a standard companion for frontend developers and UI designers handling UI physics.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:kinetics.colorion.co

    Kinetics: Spring-Physics Motion Library for Web Interfaces

    Kinetics is a collection of 153 web interface animations powered by spring physics instead of fixed-duration easing curves. Each effect is provided as pure CSS, React code, and a dedicated AI prompt.

    Web development· Resource

  • Link:Jakub Antalik

    Transitions.dev: UI Transitions for Web Apps and AI Agents

    Transitions.dev is a curated library of user interface transitions for web applications. The collection includes standard UI components as well as interaction patterns tailored for AI interfaces, designed to be copied directly or utilized by coding agents via a skill.

    AI & LLMs· Resource

  • Link:transition-kit.space

    Transition Kit: Templates for Page and Theme Transitions

    Transition Kit is a template library for page transitions and theme toggles on the web. Powered by the View Transitions API, it provides live previews, customizable timing and easing, and copyable code snippets.

    Web development· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

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

Parts of this content were created with the assistance of AI.