Uwarp

Easing Functions Cheat Sheet

Easing functions specify the rate of change of a parameter over time.

Objects in real life do not just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

This page helps you choose the right easing function.

Open Source

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

Help Us Improve

—

(—)

CSS easing functions cheat sheet

Define easing with visual s-curve graphs, cubic-bezier CSS, TypeScript math, and live bounce demos for transitions and animation tweening.

What is an easing functions cheat sheet?

An easing functions cheat sheet helps you define easing—the rate of change of a parameter over time—for CSS transitions and animations. This hosted reference maps each preset to an s-curve graph so you can read acceleration like a graph of a function, not guess from names alone. Browse sine, quad, cubic, quart, quint, exponential, circular, back, elastic, and bounce families in ease-in, ease-out, and ease-in-out forms. Each card shows the curve shape, copy-ready `cubic-bezier()` CSS, PostCSS plugin examples, TypeScript function code, and demo cards for size, position, and opacity.

What this cheat sheet includes

Visual timing curves with code you can paste into stylesheets.

  1. S-curve and elastic graphs: Every preset renders as a labeled graph—compare sinusoidal ease, cubic curves, and elastic overshoot before you commit to a token.
  2. Copy-ready cubic-bezier() CSS: Paste timing values into `transition-timing-function`, `animation-timing-function`, or design-system motion files.
  3. TypeScript function snippets: See the math behind each curve—useful when you need the same easing logic outside CSS or want to verify interpolation behavior.
  4. Bounce and GIF-style motion: Bounce presets model deceleration with overshoot—similar to a bouncing ball animation—via generated @keyframes when bezier alone is not enough.
  5. Live demo cards: Toggle size, position, and opacity to preview ease-out motion against a linear baseline at a realistic one-second duration.

How to use this easing reference

From curve selection to production CSS.

  1. Hover to read the graph: Move over a card to animate a cursor along the curve—helpful when you need to see ease-in versus ease-out acceleration on the same family.
  2. Open detail view and copy CSS: Click a preset (or use a URL hash) to open cubic-bezier snippets, PostCSS easings examples, and the TypeScript function body.
  3. Pick ease-out for exits: Ease-out curves mimic natural deceleration—objects slow as they settle—so they fit dismissals, tooltips, and modal exits.
  4. Use keyframes for bounce and elastic: When a single bezier cannot capture overshoot, copy the generated @keyframes blocks for scale, translate, or opacity.
  5. Standardize three to five presets: Document a small set in your UI cheats or design tokens instead of choosing a new curve per screen.

Tips for animation tweening

Match curve shape to interaction weight.

  1. Linear is not the default in real motion: Linear interpolation feels mechanical; ease-in-out or ease-out usually reads more natural for interface feedback.
  2. Exponential and sinusoidal families differ in feel: Expo presets accelerate sharply; sine curves stay softer—pick based on how dramatic the motion should feel.
  3. Sample duration in context: The same easing function feels different at 120ms versus 400ms—validate with the demo cards before shipping.
  4. Respect prefers-reduced-motion: Shorten or remove non-essential animation when users request reduced motion.

Who this is for

Developers and designers standardizing motion.

  1. Front-end developers: Copy cubic-bezier values and TypeScript easing functions without memorizing Penner equation names.
  2. Design system leads: Publish a motion cheat sheet backed by graphs and consistent CSS output.
  3. Motion designers: Discuss ease-in and ease-out timing with a shared visual reference—then hand off exact CSS to engineering.
  4. Video and UI teams: Compare curve shapes when matching web motion to tools like DaVinci Resolve ease-in/out—paste equivalent CSS timing on the web side.

Why keep this cheat sheet handy

Fast reference at a stable URL.

  1. Graph plus code in one place: See the function graph and copy CSS or TypeScript from the same detail view—no tab switching.
  2. Industry-standard preset set: Thirty Robert Penner–style curves with the same data set cited in CSS motion articles and open-source tooling.
  3. Pairs with custom curve editors: Use /cubic-bezier when presets need handle tweaks, or /animista for multi-step keyframe animations.

Technical notes

Output format and scope.

  1. CSS and keyframe output: Most families export `cubic-bezier()` for transitions; elastic and bounce export @keyframes examples for size, position, and opacity.
  2. TypeScript math per preset: Each detail page shows a TypeScript function where x is normalized progress from 0 to 1—handy for custom runtimes or tests.
  3. Source attribution: Curve data follows the GPL-3.0 Easings.net open-source project by Andrey Sitnik and Ivan Solovev.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Programming.

View all Programming