← Back to Motion & Animation

Easing curves define the acceleration and deceleration of animations, creating natural and engaging motion. Use these carefully crafted curves to give your animations personality and purpose.

EntranceExitAttentionInteractiveStandardNavigationFeedbackLoading

Smooth Entry

Entrance

Gentle acceleration for element entrances

Modals, tooltips, dropdown menus

cubic-bezier(0.25, 0.46, 0.45, 0.94)
DEMO

Quick Exit

Exit

Sharp deceleration for element exits

Closing dialogs, hiding notifications

cubic-bezier(0.55, 0.055, 0.675, 0.19)
DEMO

Bounce In

Attention

Playful overshoot for attention-grabbing

Success messages, button clicks

cubic-bezier(0.68, -0.55, 0.265, 1.55)
DEMO

Elastic

Interactive

Spring-like motion with elastic feel

Interactive elements, state changes

cubic-bezier(0.175, 0.885, 0.32, 1.275)
DEMO

Smooth

Standard

Material Design standard curve

General purpose, card animations

cubic-bezier(0.4, 0.0, 0.2, 1)
DEMO

Sharp

Navigation

Quick start with gradual deceleration

Navigation, drawer slides

cubic-bezier(0.4, 0.0, 0.6, 1)
DEMO

Overshoot

Feedback

Slight bounce back for emphasis

Hover effects, selection feedback

cubic-bezier(0.175, 0.885, 0.320, 1.275)
DEMO

Anticipation

Loading

Pulls back before moving forward

Loading states, page transitions

cubic-bezier(0.6, -0.28, 0.735, 0.045)
DEMO

Smooth Entry

Quick Exit

Bounce In

Elastic

Choosing the Right Curve

  • • Entrance: Use curves that accelerate gently
  • • Exit: Use curves that decelerate quickly
  • • Interactive: Add slight overshoot for feedback
  • • Loading: Use anticipation curves for engagement
  • • Standard: Stick to proven curves for common UI

Custom Curves

Create custom curves using:

cubic-bezier(x1, y1, x2, y2)

Use tools like cubic-bezier.comto visualize and test custom curves.