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.
  • 01

    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.

  • 02

    Exponential and sinusoidal families differ in feel

    Expo presets accelerate sharply; sine curves stay softer—pick based on how dramatic the motion should feel.

  • 03

    Sample duration in context

    The same easing function feels different at 120ms versus 400ms—validate with the demo cards before shipping.

  • 04

    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.

  • Graph plus code in one place

    See the function graph and copy CSS or TypeScript from the same detail view—no tab switching.

  • Industry-standard preset set

    Thirty Robert Penner–style curves with the same data set cited in CSS motion articles and open-source tooling.

  • 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.
CSS and keyframe output
Most families export `cubic-bezier()` for transitions; elastic and bounce export @keyframes examples for size, position, and opacity.
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.
Source attribution
Curve data follows the GPL-3.0 Easings.net open-source project by Andrey Sitnik and Ivan Solovev.

Sources & References

Authoritative references on CSS easing functions, the Robert Penner easing equations, and the open-source Easings.net project that inspired this cheat sheet.
  • “The CSS `transition-timing-function` and `animation-timing-function` properties accept `cubic-bezier()` values that define the acceleration curve of an animation over its duration, enabling natural motion.”
    — MDN Web Docs — CSS easing functions

    CSS easing functions — timing and acceleration: Each preset in this cheat sheet provides a ready-to-copy `cubic-bezier()` value that can be used directly in `transition-timing-function` or `animation-timing-function` properties. developer.mozilla.org/en-US/docs/Web/CSS/easing-function

  • “Robert Penner's easing equations, published in 2001, define a set of mathematical functions for tweening that model acceleration, deceleration, overshoot, bounce, and elastic motion. They remain the standard reference for animation timing.”
    — Robert Penner — Programming Macromedia Flash MX

    Robert Penner easing equations: The 30 presets in this cheat sheet follow the Penner-style curve families: sine, quad, cubic, quart, quint, expo, circ, back, elastic, and bounce, each in ease-in, ease-out, and ease-in-out variants. robertpenner.com/easing/

  • “Easings.net is an open-source project by Andrey Sitnik and Ivan Solovev that provides a searchable reference of easing functions with visual graphs and CSS cubic-bezier values, licensed under GPL-3.0.”
    — Easings.net (open-source project)

    Easings.net — open-source easing reference: This cheat sheet is a hosted replica based on the open-source Easings.net project. Curve data, graph rendering, and preset naming follow the same GPL-3.0 licensed data set. easings.net/

Frequently Asked Questions

Quick answers about this tool—open a question to read more.