Easings.net
30 standard easing curves, each with an animated demo, a cubic-bezier value and TS source
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.
npm i postcss-easingsUse 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.
- 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
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)
