Easings.net

30 standard easing curves, each with an animated demo, a cubic-bezier value and TS source

Tier A · StrongReferenceTooleasings.net

Easings.net is a cheat sheet for picking an easing function. It documents the 30 classic curves — Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic and Bounce, each in In, Out and InOut form — and for every one shows an animated preview, the curve shape, a copy-ready CSS cubic-bezier() value where one exists, and the equivalent TypeScript function. It also points at the postcss-easings plugin so you can write the names directly in CSS. Built by Andrey Sitnik (author of PostCSS and Autoprefixer) and Ivan Solovev, open source and translated into many languages.

Install

npm i postcss-easings

For an agent

Use this when you know the feel you want but not the numbers — it maps a plain-English intent ('overshoot slightly', 'settle with a bounce') onto a named curve and hands you both the CSS cubic-bezier and the JS implementation, which matters because Elastic and Bounce cannot be expressed as a cubic-bezier at all and need the function form. Pair it with cubic-bezier.com when you want to nudge one of these curves rather than take it as-is. Note the GPL-3.0 on the repo covers the site's own source; the easing formulas themselves are standard maths from Robert Penner and are not encumbered.

Why it is here. It turned a scattered folder of Penner equations into the shared vocabulary designers and engineers actually use when arguing about motion. Cheap to consult, and it stops teams from defaulting to ease-in-out for everything.

Install command, framework, licence and component list.

Facts

License: GPL family
Pricing: Free, Open source
Framework: Vanilla JS
Styling: Vanilla CSS
Distribution: GitHub repository, Copy-paste snippet
Platform: Web, Platform agnostic
Content type: Code, Prose / writing
Agent readiness: Copy-paste ready code, Readable open source, Structured documentation
Accessibility: Not applicable
Maturity: Actively maintained
GitHub stars: 8,665
Package: postcss-easings

Components it ships

Transition Animation

Notable for

30 named easing curves with live previews
CSS cubic-bezier and TypeScript for each
postcss-easings plugin integration
by Andrey Sitnik of PostCSS
8.6k GitHub stars, many translations

Provenance

Verified 2026-08-16. HTTP 200. https://easings.net (WebFetch; all 30 function names enumerated), https://github.com/ai/easings.net (WebFetch), https://api.github.com/repos/ai/easings.net (stars, GPL-3.0, pushed_at)

Also in Utilities & Naming

easings.netTier A