OneTaskBy Tim King · Updated
Compare CSS Easing Functions Side by Side
Ease-In-Out Versus Ease-Out, Plus Your Own cubic-bezier() Curve
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Easing Comparison works
This page lets you compare CSS easing functions by watching them run. Easing is hard to judge from a name. Choose two timing functions, or type a cubic-bezier() of
your own, and the tool runs the same slide, scale, fade or rotation with both at once, each with
its curve drawn beside the track. Slow the duration down to see where they differ, then copy the
CSS for whichever one feels right.
Compare CSS easing functions: what each curve feels like
A timing function maps elapsed time to progress. linear is a straight diagonal: half the time
is half the distance. Every other easing bends that line. ease-out curves start fast and settle
slowly, which is what most interface motion wants because the element appears to respond
instantly and then come to rest. ease-in curves do the opposite and are mainly useful for things
leaving the screen. ease-in-out is symmetrical and suits movement between two resting states,
such as a panel sliding from one side to the other.
The named keywords are only five curves. The rest of the list, from ease-in-quad through
ease-in-out-expo, are the standard Penner easings expressed as cubic-bezier() values. The
number in the name is not shown, but the family is: quad is gentle, cubic is more pronounced,
expo is dramatic with a long tail. The back family overshoots past the end and returns, which is
why its curve leaves the box; that gives a playful bounce on things like buttons and badges but
looks wrong on layout shifts. circ starts almost vertically, like an object dropping into place.
steps() is a different animal entirely. It jumps between a fixed number of positions with no
interpolation, which is what sprite sheets, typewriter cursors and retro UIs need. The staircase
in the curve panel shows exactly how many frames you get.
To test your own curve, pick Custom and paste any cubic-bezier(x1, y1, x2, y2). The x values
must stay between 0 and 1; the y values can go outside that range to overshoot. Anything the
browser would reject falls back to ease rather than freezing the preview.
The generated CSS gives both easings as transition rules and again as animation shorthand
with the matching @keyframes, so you can drop in whichever form your project uses. The preview
plays with alternate so the return trip is visible too: a curve that looks fine going out
sometimes feels sluggish coming back, and that is worth knowing before you ship it.
FAQ
Which easing should I use for a hover effect?
An ease-out such as ease-out-cubic. Hover feedback should look instant, and ease-out
starts at full speed and settles, which reads as responsive. Save ease-in for things leaving
the screen.
Why does my custom curve fall back to `ease`?
The x values must be between 0 and 1; anything outside is invalid CSS and the browser rejects the whole declaration. The y values can go beyond that range, which is how overshoot curves work.
Why does the return trip look different?
An asymmetric curve plays in reverse on the way back, so ease-out becomes ease-in. If both directions matter, as with a panel that opens and closes, use an ease-in-out curve or set a different easing on the closing transition.
Is `steps()` the same as a low frame rate?
Effectively, yes. steps(8) shows eight distinct positions across the duration with no
interpolation, which is what sprite animations and blinking cursors need. Put it beside linear to see
how the same duration reads once the in-between frames are gone.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Cubic Bezier
Shape a CSS easing curve and watch it animate.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
CSS Transform Generator
Compose translate, rotate, scale and skew into one transform value.
Box Shadow Generator
Stack several shadow layers for depth that looks real.
Animated Counter
Make a number count-up animation and copy the code.