CSS Animation Timing Functions

Complete reference for CSS easing functions. Learn ease, ease-in, ease-out, cubic-bezier, and steps() with interactive demos.

Quick Reference

Function	Equivalent	Best For
linear	cubic-bezier(0, 0, 1, 1)	Progress bars, constant motion
ease	cubic-bezier(0.25, 0.1, 0.25, 1)	Default, general purpose
ease-in	cubic-bezier(0.42, 0, 1, 1)	Elements exiting view
ease-out	cubic-bezier(0, 0, 0.58, 1)	Elements entering view
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1)	Looping animations
steps(n)	-	Sprite sheets, typewriter

Built-in Timing Functions

Side-by-Side Comparison

linear

ease

ease-in

ease-out

ease-in-out

Click to Copy

Hover over each card to see the animation. Click to copy the value.

Custom Cubic Bezier

Create custom easing curves by adjusting the control points. The X axis represents time (0-1), Y axis represents animation progress (can exceed 0-1 for overshoot).

Cubic Bezier Visualizer

X axis = Time, Y axis = Progress

X10.42

Y10.00

X20.58

Y21.00

cubic-bezier(0.42, 0, 0.58, 1)

Popular Custom Easings

Common cubic-bezier presets used by designers and animation libraries. Hover to preview, click to copy.

Steps Function

Steps Function Demo

The steps() function creates discrete steps instead of smooth transitions. Perfect for sprite animations, typewriter effects, or clock-like movements.

steps(4, end)

4 discrete steps, change at end of each step. Default behavior.

steps(4, start)

4 discrete steps, change at start of each step.

steps(1, end)

Single step at end. Also known as step-end.

steps(10, end)

10 steps for smoother frame-by-frame animation.

Usage Examples

Code Examples

/* Using timing functions with transitions */
.button {
  transition: transform 0.3s ease-out;
}

.button:hover {
  transform: scale(1.05);
}

/* Using timing functions with animations */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slideIn 0.5s ease-out forwards;
}

/* Custom cubic-bezier for bounce effect */
.bounce {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Steps for sprite animation */
.sprite {
  animation: walk 0.8s steps(8) infinite;
}

@keyframes walk {
  to {
    background-position: -800px 0;
  }
}

Best Practices

Do

+Use ease-out for elements entering the screen
+Use ease-in for elements leaving the screen
+Keep animations under 300-500ms for UI interactions
+Use steps() for sprite sheet animations
+Match easing to the physical metaphor (bouncy, elastic, etc.)

Don't

-Use linear for UI animations (feels robotic)
-Make animations too long (causes perceived slowness)
-Use extreme overshoot values (can feel broken)
-Animate many elements with different easings (chaotic)
-Forget prefers-reduced-motion accessibility

Frequently Asked Questions

What's the difference between animation-timing-function and transition-timing-function?

They use the same values and work the same way. animation-timing-function is used with @keyframes animations, while transition-timing-function is used with CSS transitions. Both control how the animation progresses over time.

When should I use ease vs ease-out?

Use ease-out for elements entering the viewport (feels like they're arriving and settling). Use ease-in for elements leaving (feels like they're departing). Use ease for general animations. This follows the principle of 'fast in, slow out' for natural motion.

How do I create a bounce effect in CSS?

For a simple bounce, use cubic-bezier with values greater than 1, like cubic-bezier(0.175, 0.885, 0.32, 1.275). For complex bounces with multiple oscillations, you'll need @keyframes with multiple steps or a JavaScript animation library.

What does cubic-bezier mean?

Cubic-bezier defines a curve using 4 control points. The first two values (x1, y1) and last two (x2, y2) define the curve shape. X values must be 0-1 (time), Y values can exceed 0-1 for overshoot effects. The curve determines speed at each point in the animation.

When should I use steps() instead of smooth easing?

Use steps() for sprite sheet animations, typewriter effects, clock ticking, or any animation that should move in discrete jumps rather than smoothly. It's perfect for frame-by-frame animations where you want each frame to display for equal time.

Extract animation styles from any website

Frontend Hero's CSS Scanner lets you inspect and copy animation timing functions from any website in 2 clicks. See how top sites animate their interfaces.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →